---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/reference/css-classes'
title: 'CSS 类参考 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:21:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'DXPR Builder 内容使用 Bootstrap 5 类以及少量自己的类。本参考列出您最可能使用或在 CSS 中定位的类。'
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:21:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'CSS 类参考'
      description: 'DXPR Builder 内容使用 Bootstrap 5 类以及少量自己的类。本参考列出您最可能使用或在 CSS 中定位的类。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:21:22+0000'
      dateModified: '2026-10-24T08:21: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/reference/css-classes'
      articleSection: '元素与 CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/reference/css-classes'
      description: 'DXPR Builder 内容使用 Bootstrap 5 类以及少量自己的类。本参考列出您最可能使用或在 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/reference) /[元素与 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # CSS 类参考.

 学习 DXPR Builder参考元素与 CSS

   ## 本指南内容

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

## 添加自定义类

1. 选择元素。
2. 打开 **More > Settings**.
3. 在 **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 显示实用程序，在特定屏幕尺寸显示或隐藏内容：

```html
<!-- 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** 设置中的版块）以控制响应式可见性。