CSS 类参考.

学习 DXPR Builder参考元素与 CSS

DXPR Builder 内容使用 Bootstrap 5 类以及少量自己的类。本参考列出您最可能使用或在 CSS 中定位的类。

添加自定义类

选择元素。
打开 More > Settings.
在 General 版块，在以下位置选择类 HTML classes 字段。要输入类名，请点击 Edit as text 并用空格分隔类。

Bootstrap 网格类

容器类

类	描述
`.container`	固定宽度居中容器
`.container-fluid`	全宽容器

行和列类

类	描述
`.row`	列的弹性容器
`.col-{n}`	占据行 n/12 的列
`.col-sm-{n}`	小屏幕列宽（576px+）
`.col-md-{n}`	中屏幕列宽（768px+）
`.col-lg-{n}`	大屏幕列宽（992px+）
`.col-xl-{n}`	超大屏幕列宽（1200px+）

Bootstrap 间距实用程序

边距

类	描述
`.m-{0-5}`	四周外边距
`.mt-{0-5}`	顶部外边距
`.mb-{0-5}`	底部外边距
`.ms-{0-5}`	起始外边距（LTR 中为左侧）
`.me-{0-5}`	结束外边距（LTR 中为右侧）
`.mx-{0-5}`	左右外边距
`.my-{0-5}`	上下外边距

内边距

类	描述
`.p-{0-5}`	四周内边距
`.pt-{0-5}`	上内边距
`.pb-{0-5}`	下内边距
`.ps-{0-5}`	头内边距
`.pe-{0-5}`	尾内边距
`.px-{0-5}`	左右内边距
`.py-{0-5}`	上下内边距

Bootstrap 文本实用程序

类	描述
`.text-start`	左对齐文本
`.text-center`	居中对齐的文本
`.text-end`	右对齐文本
`.fw-bold`	粗体
`.fw-light`	细体文本
`.fst-italic`	斜体
`.text-uppercase`	大写文本
`.text-lowercase`	小写文本
`.fs-1` 到 `.fs-6`	字号（1 最大）

Bootstrap 颜色实用程序

文本颜色

类	描述
`.text-primary`	主题主色
`.text-secondary`	主题辅色
`.text-success`	Green (success)
`.text-danger`	Red (danger/error)
`.text-warning`	Yellow (warning)
`.text-info`	青色（信息）
`.text-muted`	灰色柔和文本
`.text-white`	白色文本

背景颜色

类	描述
`.bg-primary`	主背景
`.bg-secondary`	次背景
`.bg-success`	绿色背景
`.bg-danger`	红色背景
`.bg-warning`	黄色背景
`.bg-info`	青色背景
`.bg-light`	浅灰色背景
`.bg-dark`	深色背景

Bootstrap 显示实用程序

类	描述
`.d-none`	隐藏元素
`.d-block`	块级显示
`.d-inline`	内联显示
`.d-sm-none`	在 small+ 隐藏
`.d-md-block`	在中等及以上显示
`.d-lg-none`	在 large+ 隐藏

DXPR Builder 类

元素类

类	描述
`.az-element`	大多数内容元素的基础类；Button 和 Image 没有该类，因此改用 `.az-<type>`。
`.az-<type>`	每种元素类型一个类，例如 `.az-text`, `.az-image` 或 `.az-images-carousel`；Social Links 使用 `.st-social`
`.az-section`	版块元素
`.row`	Row element (Bootstrap)；旧版本内容也可能带有 `.az-row`
`.col-*`	Column element (Bootstrap)；旧版本内容也可能带有 `.az-column`

动画类

动画使用 animate.css 命名。元素播放动画时具有：

类	描述
`.animated`	动画运行时添加
`.infinite`	打开 Infinite 时添加 Infinite 打开时
动画名称，例如 `.fadeIn`	该 Animation in 或 Animation out 正在播放的效果

变体类

类	描述
`.az-variant-container`	A/B 测试容器，对应 `.rl-experiment`
`.az-variant-wrapper`	每个变体分支
`.az-variant-original`	原始分支 (A)
`.az-variant-1`, `.az-variant-2`	B、C 等变体分支
`.az-variant-active`	当前显示的分支

使用类实现响应式可见性

组合 Bootstrap 显示实用程序，在特定屏幕尺寸显示或隐藏内容：

<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

在元素的以下位置添加这些类 HTML classes 字段（在 General 设置中的版块）以控制响应式可见性。