---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'CSS 架构 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:45:24+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '构建器内容是 Bootstrap 5 标记加少量 az- 类。知道哪些类出现在已发布页面、哪些只在编辑器运行时存在，就知道主题 CSS 可以针对什么。'
tags:
  - 'Architectuur en API’s'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T00:45:24+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'CSS 架构'
      description: '构建器内容是 Bootstrap 5 标记加少量 az- 类。知道哪些类出现在已发布页面、哪些只在编辑器运行时存在，就知道主题 CSS 可以针对什么。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:45:24+0000'
      dateModified: '2026-10-24T00:45:24+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/development/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: '构建器内容是 Bootstrap 5 标记加少量 az- 类。知道哪些类出现在已发布页面、哪些只在编辑器运行时存在，就知道主题 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
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # CSS 架构.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

构建器内容是 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)** 假定主题加载它。