bootstrap_ref_css_helpers

Bootstrap CSS 辅助类参考

文本工具类 (Text Utilities)

通过文本颜色工具类传达含义。应用这些类后，链接在悬停时会变暗。

类 描述 示例

.text-primary 主色文本

.text-primary

.text-secondary 次色文本

.text-secondary

.text-success 成功色文本

.text-success

.text-danger 危险色文本

.text-danger

.text-warning 警告色文本

.text-warning

.text-info 信息色文本

.text-info

.text-light 浅色文本（在深色背景上）

.text-light

.text-dark 深色文本

.text-dark

.text-body 默认正文颜色文本

.text-body

.text-muted 静默文本

.text-muted

.text-black-50 50% 透明度的黑色文本

.text-black-50

.text-white-50 50% 透明度的白色文本（在深色背景上）

.text-white-50

.text-body-emphasis 强调的正文文本

.text-body-emphasis

.text-body-secondary 次要正文文本（较浅）

.text-body-secondary

.text-body-tertiary 第三级正文文本（更浅）

.text-body-tertiary

背景工具类 (Background Utilities)

类似地，使用背景工具类来应用背景颜色。

类 描述 示例

.bg-primary 主背景颜色

.bg-primary

.bg-secondary 次背景颜色

.bg-secondary

.bg-success 成功背景颜色

.bg-success

.bg-danger 危险背景颜色

.bg-danger

.bg-warning 警告背景颜色

.bg-warning

.bg-info 信息背景颜色

.bg-info

.bg-light 浅背景颜色

.bg-light

.bg-dark 深背景颜色

.bg-dark

.bg-body 正文背景颜色

.bg-body

.bg-body-secondary 次要正文背景

.bg-body-secondary

.bg-body-tertiary 第三级正文背景

.bg-body-tertiary

.bg-transparent 透明背景

.bg-transparent

其他辅助工具类 (Other Helper Utilities)

类 描述 示例

.float-start 将元素向左浮动（在从左到右的布局中为起始端）

Float start

.float-end 将元素向右浮动（在从左到右的布局中为末端）

Float end

.float-none 禁用元素的浮动

Float none

.mx-auto 居中一个设置了宽度的块级元素

Centered element

.clearfix 清除容器内的浮动

Floated LeftFloated Right

.d-block, .d-inline, .d-flex, etc. 控制元素的显示行为（参见显示工具类）

d-inline

.d-none 隐藏元素

Hidden element

.visually-hidden 在视觉上隐藏元素，但仍可供屏幕阅读器访问 Hidden for screen readers

.visually-hidden-focusable 在视觉上隐藏元素，但在聚焦时显示 Skip to main content

.btn-close 设置通用关闭按钮样式，常用于模态框和警告框

响应式显示工具类 (Responsive Display Utilities)

Bootstrap 5 提供了强大的显示工具类，用于根据视口尺寸显示和隐藏内容。这些类取代了旧的 .visible-* 和 .hidden-* 类。

使用 .d-{breakpoint}-{displayValue} 等类来控制可见性。例如，.d-none 在所有屏幕尺寸下隐藏元素，而 .d-md-block 在中等屏幕及以上尺寸时使元素 display: block。你可以组合这些类来创建复杂的响应式布局。

断点：sm (small), md (medium), lg (large), xl (extra large), xxl (extra extra large)。没有断点后缀意味着它适用于 xs (extra small) 及以上。

常用显示值：none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex。

示例： .d-none: 在所有视口下隐藏。 .d-sm-block: 从 sm 断点开始及以上尺寸时 display: block。 .d-lg-none: 从 lg 断点开始及以上尺寸时隐藏。 .d-none .d-md-inline-block: 默认隐藏，但在 md 断点开始及以上尺寸时 display: inline-block。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Responsive Display Utilities</title>
</head>
<body>
  <div class="container mt-3">
    <p>调整页面大小以查看下方文本如何变化：</p>
    <div class="p-2 bg-primary text-white d-block d-sm-none">仅在 XS 屏幕可见</div>
    <div class="p-2 bg-success text-white d-none d-sm-block d-md-none">仅在 SM 屏幕可见</div>
    <div class="p-2 bg-info text-dark d-none d-md-block d-lg-none">仅在 MD 屏幕可见</div>
    <div class="p-2 bg-warning text-dark d-none d-lg-block d-xl-none">仅在 LG 屏幕可见</div>
    <div class="p-2 bg-danger text-white d-none d-xl-block">在 XL 和 XXL 屏幕可见</div>
  </div>
</body>
</html>

你还可以使用打印显示工具类，例如 .d-print-none，在打印时隐藏元素。