--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css' title: '链接到版块并用类复用样式 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:53:27+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 给版块一个 HTML ID，按钮就能跳转到它。添加 HTML classes，可以在手机上隐藏元素、按屏幕尺寸设置间距，或复用主题定义的样式。两个字段都在每个元素的 General 面板底部。类让样式保持一致：其 CSS 规则一改，带该类的所有元素一起变。 本视频按下面第一个配方操作：让按钮跳转到页面下方的版块。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 链接到版块并用类复用样式 description: |- 给版块一个 HTML ID，按钮就能跳转到它。添加 HTML classes，可以在手机上隐藏元素、按屏幕尺寸设置间距，或复用主题定义的样式。两个字段都在每个元素的 General 面板底部。类让样式保持一致：其 CSS 规则一改，带该类的所有元素一起变。 本视频按下面第一个配方操作：让按钮跳转到页面下方的版块。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:53:27+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css' articleSection: 设置元素样式 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css' description: |- 给版块一个 HTML ID，按钮就能跳转到它。添加 HTML classes，可以在手机上隐藏元素、按屏幕尺寸设置间距，或复用主题定义的样式。两个字段都在每个元素的 General 面板底部。类让样式保持一致：其 CSS 规则一改，带该类的所有元素一起变。 本视频按下面第一个配方操作：让按钮跳转到页面下方的版块。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) # 链接到版块并用类复用样式. 学习 DXPR Builder搭建页面设置元素样式 ## 本指南内容 相关指南 - [让布局适配手机](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design) 给版块一个 **HTML ID**，按钮就能跳转到它。添加 **HTML classes**，可以在手机上隐藏元素、按屏幕尺寸设置间距，或复用主题定义的样式。两个字段都在每个元素的 **General** 面板底部。类让样式保持一致：其 CSS 规则一改，带该类的所有元素一起变。 本视频按下面第一个配方操作：让按钮跳转到页面下方的版块。 ## 开始之前 - 在 DXPR Builder 中打开页面；指向元素即显示带 **More** 的控制栏。刚接触构建器？请参阅[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)。 - **Save**（对话框中）将修改保留在编辑器中。内容上方构建器工具栏上的 **Save** 保存页面并显示 "Saved field"。 - **HTML ID** 用于跳转目标。"Book a tour" 按钮可以滚动到预约表单。长页顶部的链接列表可以通往各部分。 - **重复出现的样式请用类。**网站管理员写一次 CSS，您在需要处添加类。**Style** 面板是把值逐个复制进元素，久了会走样。 - **Style** 面板做不到的事请用类，如在手机上隐藏元素或按屏幕尺寸改间距。 ## 配方：跳转到版块的按钮 1. 悬停目标**版块**，点击 **More**，再点击 **Settings**。 2. 在 **General** 面板输入一个短名称，如 `programmes`，填入 **HTML ID**。点击 **Save**。 3. 打开**按钮**的设置。在 **Link** 中输入 `#` 加完全相同的名称：`#programmes`。点击 **Save**。 4. 点击构建器工具栏上的 **Save**。 5. 在视图菜单（眼睛图标）中选择 **Preview** 并点击按钮。 请让目标版块在按钮下方，滚动效果才看得见。如果目标在可折叠面板、选项卡或轮播幻灯片内，链接会先将其打开。 ## 配方：在手机上隐藏元素 1. 悬停元素，点击 **More**，再点击 **Settings**。 2. 在 **General** 面板，点击 **HTML classes** 框。 3. 选择 **Hidden on extra small devices, phones (<576px)**。它在 **Responsive Visibility** 分组中。 4. 点击对话框中的 **Save**，再点击工具栏上的 **Save**。 该元素在窄于 576 px 的屏幕上消失，编辑器中也一样。要检查，请在手机上打开页面。 ## 配方：输入自己的类 此处的 **HTML classes** 框只能从列表中选择。要输入类名，请先切换为文本模式。 1. 悬停元素，点击 **More**，再点击 **Settings**。 2. 在 **HTML classes** 下，点击 **Edit as text**。框变成纯文本字段，列出元素已有的类。 3. 在其后添加您的类名，以空格分隔，例如 `brand-card py-3 py-lg-5`。不用写点：团队 CSS 中的 `.brand-card` 在这里就是 `brand-card`。 4. 点击对话框中的 **Save**，再点击工具栏上的 **Save**。 元素即采用网站团队定义的样式。 ## 您会看到的内容 在 **Preview** 中，按钮平滑滚动到版块，并为粘性页眉留出空间；地址栏末尾是 `#programmes`。宽度低于 576 px 时，隐藏的元素消失。输入的类下次打开对话框时显示为芯片，不在列表中的类带引号，如 "brand-card"。 ## 字段如何工作 ### HTML ID ID 必须以字母开头。之后可用字母、数字、连字符和下划线，不能有空格。ID 不合规则时字段下方报错，修正前 **Save** 无效。 字段留空时，元素沿用 DXPR Builder 生成的 ID。空字段以灰色显示它。每个 ID 一页只用一次：两个元素共用时，链接跳到第一个。 ### HTML classes 列表存放阴影类和 Bootstrap 5 类，按用途分组，如 **Margins**、**Padding**、**Responsive Visibility** 和 **Rounded Corners**。您的主题可在末尾添加自己的分组。 滚动打开的列表，或输入名称的一部分（如 padding、py-5 或 circular）缩小范围。输入只过滤列表；列表中没有的类请用 **Edit as text**。 Bootstrap 类只在页面加载 Bootstrap 5 时有效。它来自主题，或来自 **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`)，其中 **Sideload Bootstrap files** 设为 **Bootstrap 5**。 Bootstrap 的实用类，如颜色和间距类，标有 `!important`。同一属性上它们优先于 **Style** 面板。**Primary background** 优先于 **Background**，**Top margin size 3 (mt-3)** 优先于顶部的 **Margin**。 类名中的屏幕尺寸表示从该宽度起生效： | 类名中的尺寸 | 生效起点 | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | 因此 `py-3 py-lg-5` 在小屏幕上给上下 16 px 内边距，从 992 px 宽起给 48 px。 ### 致主题开发者 类需要在主题中有 CSS 规则，例如： ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` 要让类出现在编辑器的 **HTML classes** 列表中，请在主题的 `.info.yml` 中注册；请参阅[实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes)。全站通用样式请参阅[自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)。 ## 如果看不到效果 - **Save 无效，HTML ID 提示 "ID must start with a letter"。** ID 违反了上面的规则。请以字母开头，只用字母、数字、连字符和下划线。 - **无法输入新类。** 该框只过滤列表。请先点击 **Edit as text**。 - **列表中缺少预期的类。** 列表只有 DXPR Builder 和主题定义的类。请点击 **Edit as text** 并输入。 - **按钮完全不滚动。** **Link** 必须是 `#` 加完全一致的 HTML ID，大小写相同。请检查两个字段，并在 **Preview** 中测试。 - **类没有效果。** 名称拼错、主题没有对应规则，或未加载 Bootstrap 5。请检查拼写，再向网站管理员询问规则或 **Sideload Bootstrap files**。 - **团队的类只改变了部分样式。** 同一属性上的 **Style** 面板值优先于主题类。请在 **Style** 面板清除该值。 - **按钮跳错了位置。** 两个元素共用 ID，第一个胜出。请给每个元素单独的 ID。 - **版块标题藏在粘性页眉下。** DXPR Builder 不认识您的页眉。网站管理员将 **Scroll offset selector** 设为页眉的 CSS 选择器，位置在 **General Settings** > **Advanced Settings**（`/admin/dxpr_studio/dxpr_builder/settings`）。 ## 接下来做什么？ - [响应式设计](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design)：规划各屏幕尺寸显示哪些元素。