类名繁多，不必都记在脑子里——记在心里，查在指间。这一页是本站教程里出现过（以及相关）
的工具类速查：每个取值一句话说明，翻到即用。
使用说明
* 表示占位符：间距类写数字 0–5，颜色类写 8 色名，断点类写 sm / md / lg / xl / xxl；- 带断点的类（如
mt-md-3、d-lg-none）除专门标注外，一律遵循
“该断点及以上生效”；
- 完整组件（卡片、导航、模态框等）请查离线文档；
本页只收“一招一式”的工具类。
水平对齐：justify-content-*
作用于弹性容器（row、d-flex 等），决定“多余空间怎么分”。
| 类名 | 效果 |
|---|
justify-content-start | 列挤在行首（默认行为） |
justify-content-center | 列整体居中，最常用 |
justify-content-end | 列挤到行尾 |
justify-content-between | 两端贴边，列与列之间均分 |
justify-content-around | 每个列左右各分半份，列间缝是边缘缝的两倍 |
justify-content-evenly | 列与列、列与边缘的缝全部相等 |
带断点：justify-content-md-center 等，从该断点起生效。
垂直对齐：align-items-* / align-self-*
| 类名 | 效果 |
|---|
align-items-start | 子项顶端对齐 |
align-items-center | 子项垂直居中 |
align-items-end | 子项底端对齐 |
align-items-stretch | 拉伸撑满（默认行为） |
align-items-baseline | 按文字基线对齐 |
align-self-* | 同上五个取值，但只作用于单个子项 |
align-content-* | 弹性容器换行后行与行之间的分布，取值同 justify-content |
间距：m-* / p-*
m 是外边距 margin、p 是内边距 padding，数字档位如下：
| 数字 | 实际值 | 感觉 |
|---|
| 0 | 0 | 贴死 |
| 1 | 0.25rem（4px） | 微呼吸 |
| 2 | 0.5rem（8px） | 小间隔 |
| 3 | 1rem（16px） | 标准间距 |
| 4 | 1.5rem（24px） | 宽松 |
| 5 | 3rem（48px） | 大开大合 |
| 方向后缀 | 作用 | 例子 |
|---|
t 上 / b 下 / s 左 / e 右 | 单边 | mt-3 上边距 1rem |
x 左右 / y 上下 | 成对 | px-2 左右内边距 0.5rem |
| 不带后缀 | 四边 | p-4 四边 1.5rem |
auto | 自动分配剩余空间 | mx-auto 水平居中、ms-auto 推到右侧 |
带断点：mt-md-3、p-lg-5 等，从该断点起生效。
文本：text-* / fs-* / fw-* / fst-* / lh-*
| 类名 | 效果 |
|---|
text-start / text-center / text-end | 左对齐 / 居中 / 右对齐 |
fs-1 – fs-6 | 字号 6 档（2.5rem 递减到 1rem） |
fw-bold / fw-bolder / fw-semibold / fw-medium / fw-normal / fw-light / fw-lighter | 字重 7 档 |
fst-italic / fst-normal | 斜体 / 常规 |
lh-1 / lh-sm / lh-base / lh-lg | 行高 4 档：最紧到最松 |
text-decoration-underline / -line-through / -none | 下划线 / 删除线 / 去装饰 |
text-lowercase / text-uppercase / text-capitalize | 小写 / 大写 / 首字母大写 |
text-wrap / text-nowrap | 自动换行（默认）/ 禁止换行 |
text-break / text-truncate | 任意处可断行 / 单行溢出变省略号 |
text-body / text-body-secondary / text-body-tertiary | 正文色 / 二级弱化 / 三级弱化 |
颜色：text-* / bg-* / text-bg-*
8 色语义贯穿全站：primary 主、secondary 次、success 成、danger 危、warning 警、info 讯、light 浅、dark 深。
| 类名 | 效果 |
|---|
text-primary 等 | 文字色（本站主色已被染成朱砂） |
bg-primary 等 | 背景色 |
text-bg-primary 等 | 背景 + 自动配好对比文字色 |
primary-subtle 等 | 柔和版（如 bg-primary-subtle），做浅底醒目不易翻车 |
text-primary-emphasis 等 | 强调版文字色 |
边框、圆角与阴影
| 类名 | 效果 |
|---|
border / border-0 | 加一圈细边 / 去掉边框 |
border-top / -bottom / -start / -end | 只保留单边 |
border-primary 等 | 边框颜色 |
border-1 – border-5 | 边框粗细 5 档 |
rounded / rounded-0 – rounded-5 | 小圆角 / 0 到更圆，数字越大越圆 |
rounded-circle / rounded-pill | 正圆 / 胶囊形 |
shadow-sm / shadow / shadow-lg / shadow-none | 阴影三档，由浅入深 / 去阴影 |
显示：d-*
值有多少种，类就有多少种；每种都能加断点前缀（如 d-md-none）。
| 值 | 作用 |
|---|
d-none | 隐藏（最常用的“开关”起点） |
d-inline / d-inline-block | 行内 / 行内块 |
d-block | 块级、独占一行 |
d-flex / d-inline-flex | 弹性布局（配合下文 flex-*） |
d-grid | 网格布局 |
d-table / d-table-row / d-table-cell | 用 CSS 扮演表格结构 |
心法：显隐开关
d-none d-md-block = 默认隐藏、md 起显示；d-md-none = 默认显示、md 起隐藏。
注意：d-none（display:none）是把元素从布局里整个移除，
读屏软件也读不到它；想要“视觉隐藏、读屏可读”，请用 visually-hidden。
弹性布局：flex-* 与 gap-*
| 类名 | 效果 |
|---|
flex-row / flex-row-reverse | 横向排（默认）/ 横向反排 |
flex-column / flex-column-reverse | 纵向排 / 纵向反排 |
flex-wrap / flex-nowrap / flex-wrap-reverse | 允许换行（默认）/ 禁止换行 / 反向换行 |
flex-fill | 等分剩余空间（想平均分就用它） |
flex-grow-0/1 | 按比例抢占剩余空间（0 不抢） |
flex-shrink-0/1 | 空间不足时是否可压缩（0 不缩） |
order-0 – order-5，另有 order-first / order-last | 视觉排序，数字小在前 |
gap-0 – gap-5（可加断点如 gap-lg-3） | 子项之间的横纵向间距 |
尺寸：w-* / h-*
| 类名 | 效果 |
|---|
w-25 / w-50 / w-75 / w-100 / w-auto | 宽度 25% / 50% / 75% / 100% / 按内容 |
h-25 / h-50 / h-75 / h-100 / h-auto | 高度同款五档 |
mw-100 / mh-100 | 最大宽 / 最大高 100% |
vw-100 / vh-100 | 视口宽 / 高的 100% |
位置与层级：position-* / top-* / start-*
| 类名 | 效果 |
|---|
position-static / -relative / -absolute / -fixed / -sticky | 默认 / 相对 / 绝对 / 固定 / 吸顶 |
top-0/50/100、bottom-0/50/100、start-0/50/100、end-0/50/100 | 相对定位容器四边的偏移距离 |
translate-middle / -x / -y | 自身平移 50%（配合 top-50 等实现精确居中） |
可见性、透明度与交互
| 类名 | 效果 |
|---|
visible / invisible | 可见 / 隐藏但仍占位（区别于 d-none） |
opacity-0 – opacity-100 | 透明度 5 档（0 / 25 / 50 / 75 / 100） |
overflow-auto / overflow-hidden | 溢出滚动 / 溢出裁剪（另有 overflow-scroll / overflow-visible） |
user-select-all / -auto / -none | 整段一键选 / 正常 / 禁选 |
pe-auto / pe-none | 指针事件放行 / 穿透（禁点常用） |
浮动、清除与垂直对齐
这几个是老一辈 CSS 的看家本领，Bootstrap 把它们也封成了工具类。
| 类名 | 效果 |
|---|
float-start / float-end / float-none | 左浮 / 右浮 / 不浮动（可加断点，如 float-md-end） |
clearfix | 加在父元素上，包住里面浮动的子元素（防止父元素高度塌陷） |
align-baseline / -top / -middle / -bottom | 行内元素相对基线的垂直对齐（常用于图标与文字并排） |
align-text-top / align-text-bottom | 按“文字顶 / 底”对齐，图标配文字时比数字对齐更稳 |
图片与媒体：img-* / ratio / object-fit-*
| 类名 | 效果 |
|---|
img-fluid | 最大宽度 100%（不超出容器）、高度自动，响应式图片的必备类 |
img-thumbnail | 细边框 + 内边距 + 圆角，一键相册效果 |
figure / figure-img / figure-caption | 图配说明的语义组合（图 + figcaption） |
ratio ratio-16x9 / -4x3 / -1x1 | 固定比例容器，里面的图片/视频/iframe 自动填满 |
object-fit-contain / -cover / -fill / -scale / -none | 内容与容器比例不一致时：留白 / 裁切 / 拉伸 / 缩放 / 原样（常配 h-100 w-100） |
rounded-circle | 配合对象裁切可做正圆头像（object-fit: cover + 等宽高） |
教程位置：第十七式《图片与媒体》。
布局小助手：stacks / stretched-link / vr
| 类名 | 效果 |
|---|
vstack / hstack | 垂直 / 水平堆叠（默认 gap 1rem，可再用 gap-* 调），比手写 d-flex 少一行 |
stretched-link | 把链接的“可点击范围”撑满所在的定位父元素——整张卡片可点，就靠它 |
vr | 一条竖直分隔线（垂直规则线），横向布局里的“|” |
min-vh-100 / vw-100 / vh-100 | 最小视口高度 100% / 视口宽 100% / 视口高 100% |
z-0 – z-3、z-n1 | 层级 z-index：0–3 与 -1（配合 position-relative 使用） |
链接与透明度
| 类名 | 效果 |
|---|
link-primary 等八色 | 链接文字颜色（不同于 text-*，会处理悬停态） |
link-underline-opacity-0 – -100 | 下划线浓度：0 即去掉下划线 |
link-offset-1 – link-offset-3 | 下划线与文字的间距 |
opacity-0 – opacity-100 | 整块元素透明度 0 / 25 / 50 / 75 / 100 |
border-opacity-25 等 | 边框颜色浓度（常与 border-* 同用） |
组件变体后缀速览
完整组件的用法请查离线文档与对应章节；
这里先记一份“变体后缀表”，遇到没见过的类名可以对号入座。
| 组件 | 可用后缀 / 配件 |
|---|
按钮 btn | 八色、btn-outline-*、btn-link、btn-sm/lg、active、disabled |
| 按钮组 | btn-group、btn-group-vertical、btn-toolbar |
徽章 badge | text-bg-* 八色、rounded-pill 胶囊 |
提示框 alert | 八色、alert-dismissible + btn-close（深底上给容器加 data-bs-theme="dark"，关闭按钮自动变白）、alert-heading |
引用 blockquote | 站点皮肤自带纸墨样式；署名行可加 blockquote-footer |
| 表单控件 | form-control-sm/lg、form-control-plaintext、form-control-color、form-range、form-floating、is-valid / is-invalid |
| 选择控件 | form-select（-sm/lg）、form-check、form-switch、form-check-inline |
卡片 card | card-header/footer、card-img-top、card-body、card-group、stretched-link |
表格 table | table-striped、table-hover、table-bordered、table-borderless、table-sm、table-group-divider、caption-top、八色行 |
列表组 list-group | list-group-flush、list-group-numbered、list-group-horizontal、list-group-item-action、八色项 |
| 导航 | nav-tabs、nav-pills、nav-underline、nav-fill / nav-justified、breadcrumb、navbar-expand-*、sticky-top |
模态框 modal | modal-sm/lg/xl、modal-fullscreen(-*-down)、modal-dialog-centered、modal-dialog-scrollable；“点不掉的弹窗”用 data-bs-backdrop="static" |
下拉菜单 dropdown | dropup / dropend / dropstart、dropdown-menu-end、dropdown-header、dropdown-divider、dropdown-toggle-split |
| 折叠 / 手风琴 | collapse、collapse-horizontal、accordion、accordion-flush、data-bs-parent 互斥 |
轮播 carousel | carousel-fade、carousel-caption、carousel-indicators、data-bs-ride、data-bs-interval |
| 进度与分页 | progress-stacked、progress-bar-striped、progress-bar-animated、pagination-sm/lg |
| 加载动画 | spinner-border / spinner-grow（各带 -sm）、visually-hidden 状态说明 |
| 浮层 | tooltip / popover（需 JS 初始化）、toast（toast-container + JS 显示）、offcanvas |
一句话记忆
栅格管布局、间距管呼吸、文本管脸面、颜色管情绪；
方向后缀 t/b/s/e/x/y 记一次，断点前缀 sm/md/lg/xl/xxl 记一次，
剩下的组合拳，怕忘就来翻这一页。
组件变体后缀（-sm / -lg / 八色名 / -outline）也是同一套逻辑：
记住规律，比记住类名管用。