CSS 架构.
构建器内容是 Bootstrap 5 标记加少量 az- 类。知道哪些类出现在已发布页面、哪些只在编辑器运行时存在，就知道主题 CSS 可以针对什么。
已发布页面上的类
布局
| 标记 | 类 |
|---|---|
| Section | az-section，内含 container 或 container-fluid 的外层 |
| Row | Bootstrap row |
| Column | Bootstrap col-* 类，每个断点一个 |
| 内容元素 | 每种元素类型一个类，例如 az-text、az-image 或 az-images-carousel；Social Links 用 st-social。大多数还带 az-element；Button 和 Image 没有 |
旧版本保存的内容可能还带 az-row 和 az-column。编辑器识别它们，下次保存行或列时不再写入。
修饰类
| 类 | 设置方 |
|---|---|
az-row--equal-height |
Equal-height columns（行上）；没有它行获得 align-items-start |
az-row--reverse-horizontal |
Mirror row（行上） |
az-util-vertical-centering |
Vertical centering（版块或列上） |
Bootstrap 网格
列使用 Bootstrap 的网格类：
| 类 | 宽度 |
|---|---|
col |
平分行 |
col-6 |
50% |
col-md-4 |
768 px 起 33% |
col-lg-3 |
992 px 起 25% |
写自定义 CSS
- 将构建器专用规则限定在
.az-section或类型类（如.az-text或.az-button）下。.az-element漏掉 Button 和 Image。 - 不要覆盖 Bootstrap 的网格类；编辑器通过它们设置列宽。
- 一次性装饰的话，在元素的 HTML classes 字段中加类并装饰该类。
仅编辑器的类
这些类只在编辑器运行时存在，已发布页面从不匹配它们：
| 类 | 位置 |
|---|---|
dxpr-builder-ui |
每块编辑器界面：控制栏、菜单、对话框 |
controls |
元素的控制栏 |
dxpr-editor |
除 Preview 外每种视图模式下的字段容器 |
az-ctnr |
编辑器启动后的字段容器 |
az-sortable-placeholder |
拖拽元素时的放置占位 |
编辑器自己的样式在 dxpr_builder/css/dxpr_builder_backend.css 中，由 dxpr_builder/sass/dxpr_builder_backend.scss 构建。
Bootstrap 版本
构建器写 Bootstrap 5 标记。如果主题不加载 Bootstrap 5，请将 Sideload Bootstrap files 设为 Bootstrap 5（DXPR Studio > DXPR Builder > General Settings 的 Bootstrap 下）。None (theme provides Bootstrap) 假定主题加载它。