链接到版块并用类复用样式.

学习 DXPR Builder搭建页面设置元素样式

给版块一个 HTML ID，按钮就能跳转到它。添加 HTML classes，可以在手机上隐藏元素、按屏幕尺寸设置间距，或复用主题定义的样式。两个字段都在每个元素的 General 面板底部。类让样式保持一致：其 CSS 规则一改，带该类的所有元素一起变。

本视频按下面第一个配方操作：让按钮跳转到页面下方的版块。

开始之前

在 DXPR Builder 中打开页面；指向元素即显示带 More 的控制栏。刚接触构建器？请参阅您的第一页。
Save（对话框中）将修改保留在编辑器中。内容上方构建器工具栏上的 Save 保存页面并显示 "Saved field"。
HTML ID 用于跳转目标。"Book a tour" 按钮可以滚动到预约表单。长页顶部的链接列表可以通往各部分。
重复出现的样式请用类。网站管理员写一次 CSS，您在需要处添加类。Style 面板是把值逐个复制进元素，久了会走样。
Style 面板做不到的事请用类，如在手机上隐藏元素或按屏幕尺寸改间距。

配方：跳转到版块的按钮

悬停目标版块，点击 More，再点击 Settings。
在 General 面板输入一个短名称，如 programmes，填入 HTML ID。点击 Save。
打开按钮的设置。在 Link 中输入 # 加完全相同的名称：#programmes。点击 Save。
点击构建器工具栏上的 Save。
在视图菜单（眼睛图标）中选择 Preview 并点击按钮。

请让目标版块在按钮下方，滚动效果才看得见。如果目标在可折叠面板、选项卡或轮播幻灯片内，链接会先将其打开。

某按钮的 General 面板，Title 为 See our programmes，Link 为 #programmes，旁边是页面上的该按钮

配方：在手机上隐藏元素

悬停元素，点击 More，再点击 Settings。
在 General 面板，点击 HTML classes 框。
选择 Hidden on extra small devices, phones (<576px)。它在 Responsive Visibility 分组中。
点击对话框中的 Save，再点击工具栏上的 Save。

该元素在窄于 576 px 的屏幕上消失，编辑器中也一样。要检查，请在手机上打开页面。

某文本元素的 HTML classes 字段，芯片为 Hidden on extra small devices, phones (<576px)，旁边是灰色 Plan your visit 框，桌面宽度下仍显示

配方：输入自己的类

此处的 HTML classes 框只能从列表中选择。要输入类名，请先切换为文本模式。

悬停元素，点击 More，再点击 Settings。
在 HTML classes 下，点击 Edit as text。框变成纯文本字段，列出元素已有的类。
在其后添加您的类名，以空格分隔，例如 brand-card py-3 py-lg-5。不用写点：团队 CSS 中的 .brand-card 在这里就是 brand-card。
点击对话框中的 Save，再点击工具栏上的 Save。

元素即采用网站团队定义的样式。

Edit as text 模式的 HTML classes，纯文本字段为 brand-card py-3 py-lg-5，旁边是灰色 Partner with us 框，文本上下已有该类的内边距

您会看到的内容

版块 General 面板，HTML ID 为 open-day，三个类芯片，旁边是灰底居中文本的该版块

在 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。

按 padding 过滤的 HTML classes 列表，显示 Padding 分组及 Padding size 1 到 5 和 No padding，旁边是待排版的 Course fees 文本

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 规则，例如：

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

要让类出现在编辑器的 HTML classes 列表中，请在主题的 .info.yml 中注册；请参阅实用类。全站通用样式请参阅自定义 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）。

接下来做什么？

响应式设计：规划各屏幕尺寸显示哪些元素。