--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes' title: '实用类 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:42:11+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '每个元素都有 HTML classes 字段，附带命名类列表。Bootstrap 5 实用类和投影自带。主题可通过 .info.yml 添加自己的分组，模块可通过 alter 钩子添加。本页介绍列表包含的内容和如何注册自己的类，让编辑人员按名称选用品牌外观，而不用手输类名。' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 实用类 description: '每个元素都有 HTML classes 字段，附带命名类列表。Bootstrap 5 实用类和投影自带。主题可通过 .info.yml 添加自己的分组，模块可通过 alter 钩子添加。本页介绍列表包含的内容和如何注册自己的类，让编辑人员按名称选用品牌外观，而不用手输类名。' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:42:11+0000' dateModified: '2026-10-24T09:09:48+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/customization/utility-classes' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes' description: '每个元素都有 HTML classes 字段，附带命名类列表。Bootstrap 5 实用类和投影自带。主题可通过 .info.yml 添加自己的分组，模块可通过 alter 钩子添加。本页介绍列表包含的内容和如何注册自己的类，让编辑人员按名称选用品牌外观，而不用手输类名。' 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 --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # 实用类. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [用主题 CSS 定制构建器内容样式](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css) - [在文本编辑器中添加品牌样式和按钮](/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor) - [Hooks API 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/hooks-api) 每个元素都有 **HTML classes** 字段，附带命名类列表。Bootstrap 5 实用类和投影自带。主题可通过 `.info.yml` 添加自己的分组，模块可通过 alter 钩子添加。本页介绍列表包含的内容和如何注册自己的类，让编辑人员按名称选用品牌外观，而不用手输类名。 ## 应用类 1. 打开元素的设置并找到 **HTML classes**（**General** 面板底部）。 2. 点击输入框，从列表中挑选类。在框中输入可筛选列表。 3. 要输入不在列表中的类，请点击 **Edit as text** 并输入。 4. 点击对话框中的 **Save**，再点击构建器工具栏上的 **Save**。 类进入已保存 HTML 中元素的 `class` 属性。[HTML ID 和类](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)带编辑人员走一遍常见用法。 ## 列表包含的内容 编辑器启动时构建列表，按以下顺序合并三个来源： 1. 内置列表。它有 **Drop shadows** 分组、精简的 **Bootstrap classes** 分组和 Bootstrap 5 实用类，按用途分组：**Display & Visibility**、**Responsive Visibility**、**Margins**、**Padding**、**Text Colors** 等。 2. 每个 `.info.yml` 中有 `dxpr_builder_classes` 键的已安装主题各占一个分组。分组以主题名命名。 3. 模块的更改，请参阅 [从模块注册类](#register-classes-from-a-module)。 因此每个网站都有间距类（如 `mt-3` 和 `px-4`）、显示类（如 `d-none`）和文本类（如 `text-center` 和 `fw-bold`）。这些无需您设置。 ## 在主题中注册类 将 `dxpr_builder_classes` 映射添加到主题的 `.info.yml` 中。每个键是一个类名，或用空格分隔的多个类名；每个值是编辑人员看到的标签。DXPR Theme 就是这样注册它的类的： ```yaml dxpr_builder_classes: dxpr-theme-form-inline: 'Inline Form' dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1' dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1' ``` 1. 向 `themes/custom/mytheme/mytheme.info.yml` 添加映射： ```yaml dxpr_builder_classes: brand-card: 'Brand card' brand-card shadow-lg: 'Brand card with shadow' ``` 2. 在主题每个页面都加载的库中为这些类写 CSS；请参阅 [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)。 3. 用 `drush cr` 清除缓存，让 Drupal 重新读取 info 文件。 4. 打开元素的设置，检查 **HTML classes** 是否显示带主题名的分组和两个条目。 每个带该键的已安装主题都会添加自己的分组，不仅是默认主题。分组始终沿用主题名；info 文件改不了它。 ## 从模块注册类 自定义模块可以用 alter 钩子添加类，或移除主题注册的类。它移除不了内置的 Bootstrap 条目，因为编辑器在浏览器中添加它们。代码见 [Hooks API 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter)。 ## Bootstrap 版本 内置列表是 Bootstrap 5。如果主题不加载 Bootstrap 5，请将 **Sideload Bootstrap files** 设为 **Bootstrap 5**（**Bootstrap** 下，**DXPR Studio** > **DXPR Builder** > **General Settings**），让类背后有 CSS。加载的内容请参阅 [性能](/zh-hans/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading)。 ## 如果您看不到自己的类 - **HTML classes 中缺少主题的分组。** Drupal 用的还是主题 info 文件的旧副本。请点击 **Clear all caches**（**Configuration** > **Development** > **Performance** (`/admin/config/development/performance`)），或运行 `drush cr`。 - **带该键的主题没有添加分组。** 只有已安装的主题才算数。请在 **Appearance** (`/admin/appearance`) 安装主题；它不必是默认主题。 - **选了类，元素看起来一样。** 页面上没有加载该类的 CSS。请向主题加载的库添加规则，请参阅 [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)。Bootstrap 类请参阅 [Bootstrap 版本](#bootstrap-version)。 ## 接下来做什么？ - [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)：为类写背后的规则。 - [文本编辑器](/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor)：在 **Styles** 列表中为段落和词组提供类。 - [Hooks API 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/hooks-api)：DXPR Builder 提供的其他钩子。