6. 工具类

这是什么：工具类 = 名字直接写成类的「微样式」：mt-3 上边距、text-center 居中、d-none 隐藏、d-md-flex 平板起变 Flex……一个类顶一条 CSS 规则。

为什么用：组件之间总有缝隙不对、文字想换个颜色，为这点事单开一段 CSS 太重。工具类让你不写一行自定义 CSS 就能把页面打磨整齐——前面每章示例里出现的 p-4、me-auto、h-100 全是它。

如何用：本章按「间距 / 文字颜色 / 显隐 / Flex」四类过一遍最常用的，末尾是 v5.3 的深色模式开关。

6.1 间距：m 与 p 的读法

间距分外边距 margin（m）和内边距 padding（p），尺寸从 0 到 5（1 ≈ 0.25rem）。读法三段子：

m  t-3
│  │ └─ 尺寸 0～5
│  └─── 方向：t上 b下 s左 e右 x水平 y垂直 不写=四边
└────── 类型：m=margin 外边距  p=padding 内边距

响应式版：加断点前缀 mt-md-0（md 起上边距清零）——手机留白、桌面紧凑，一个类搞定。

方向缩写是 v4→v5 最大的坑：v4 用 l/r（left/right），v5 改成 s/e（start/end），为的是兼容从右到左语言。查旧资料看到 ml-2，在 v5 里写 ms-2。

6.2 文字、颜色、背景

<p class="text-primary">主题蓝文字</p>
<p class="text-muted">次要灰文字</p>
<p class="h3 fw-bold text-center">大号粗体居中，其实是个标题别名类</p>
<p class="bg-light border rounded p-2 text-nowrap text-truncate">bg/border/rounded/truncate 都能叠</p>

• text-*：颜色（对应 6 种语义色）+ 对齐（start/center/end）+ 大小写（text-uppercase）
• fw-bold / fst-italic：粗体、斜体
• fs-*：字号缩放类（5.3 起）
• 组件上改配色尽量用 语义类（text-bg-danger），而不是硬编码 #dc3545——深色模式切换时语义类会自动适配

6.3 显示与隐藏：d-*

<div class="d-none d-md-block">手机隐藏，平板起显示</div>
<div class="d-md-none">只给手机看</div>
<div class="d-flex justify-content-between align-items-center">
  <span>Flex 三件套，CSS 第 6 章的原型</span><span class="badge text-bg-primary">两端对齐</span>
</div>

• d-none 隐藏（不占位）、d-block/d-flex/d-grid 恢复并指定显示模式
• 加断点前缀就是响应式显隐：d-none d-md-block 是「只给桌面看」的标准写法
• Flex 对齐全类名化：justify-content-*、align-items-*、flex-column、gap-*——row 本身就是 flex，这些类到处能用

6.4 CSS 变量与深色模式（v5.3）

Bootstrap 5.3 把主题色做成了 CSS 变量（--bs-primary、--bs-body-color…），可以局部覆盖：

<div class="p-3 border rounded" style="--bs-body-bg:#fdf6ec; background:var(--bs-body-bg);">
  改一个变量，这一块的底座色就变了。
</div>

整页深色更简单——html 标签加一个属性：

<html data-bs-theme="dark">

背景、文字、卡片、表格、导航栏全部自动切深色系；bg-body-tertiary 这类「随主题变」的背景类在明暗两边都好看。想做「跟随系统」或「手动切换」，把属性换成 JS 一行：

<button class="btn btn-outline-secondary"
        onclick="document.documentElement.dataset.bsTheme =
                 document.documentElement.dataset.bsTheme === 'dark' ? 'light' : 'dark'">
  切换深色
</button>

6.5 小结

工具类 + 组件 + 栅格，Bootstrap 的「静态部分」到此集齐。最后一块拼图：让弹窗、轮播动起来——而且不用 jQuery。