Bootstrap 5 常用实用类 cheat-sheet 最新版-Bootstrap教程-PHP中文网

bootstrap 5 实用类遵循「前缀+可选断点+值」命名逻辑，如pt-3、d-md-none；v5.3+支持负边距（mt-n3）、响应式gap及语义化visually-hidden-focusable，表格中需注意width约束与作用层级。

bootstrap 5 的实用类（utilities）不是靠死记，而是靠理解命名逻辑 + 掌握高频组合。最新版（v5.3.x，截至 2026 年仍为当前稳定主线）已固化 css 变量驱动机制，所有 ms-*、fw-bold、text-truncate 等类名都可预测、可推导，不需要查文档也能写对 80%。

怎么快速判断一个实用类是否存在？

Bootstrap 5 实用类全部遵循「前缀 + 可选断点 + 值」结构，比如 pt-3（padding-top）、d-md-none（display on medium and up → none）、bg-opacity-25（background opacity）。只要知道前缀含义和值范围，就能拼出来。

m/p：margin / padding；t/b/s/e/x/y：方向（top/bottom/start/end/x/y）
fs-：font-size（fs-1 ~ fs-6 对应 $font-sizes map）
fw-：font-weight（fw-light、fw-semibold、fw-bold 等，不只有数字）
lh-：line-height（lh-1、lh-sm、lh-base）
text-：文本颜色（text-primary）、对齐（text-center）、换行（text-wrap、text-truncate）
bg-：背景色（bg-body-secondary）、透明度（bg-opacity-10）
opacity-：整体透明度（opacity-25、opacity-75），注意和 bg-opacity- 区分

哪些实用类在 v5.3+ 里行为变了？

v5.3 起默认启用 $enable-negative-margins: true，所以 mt-n3、mx-n5 这类负边距类直接可用 —— 但要注意：它们不会触发父容器 BFC，可能造成内容溢出或塌陷，尤其在 flex 容器里容易被忽略。

gap 类现在支持响应式（gap-2、gap-md-4），但只对 display: flex 或 display: grid 容器生效，对普通 div 无效
overflow-hidden 在 table 上不再自动截断长文本（因 table-layout 默认 auto），需配合 text-truncate 和固定 width 或 max-width
visually-hidden-focusable 替代了旧版的 sr-only-focusable，语义更准确，但部分老项目未更新时会报 class not found

表格内常用实用类怎么配才不翻车？

Bootstrap 5 表格本身依赖 .table 基础类，但实用类叠加必须注意层级和继承顺序。例如给单元格加文字截断，不能只写 text-truncate：

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

必须包裹在 td 或 th 内，且该单元格需有明确宽度（如 min-w-0 或 style="width: 200px"），否则 text-truncate 不生效
align-middle 对 td 有效，但对 tr 无效 —— 垂直居中要作用在单元格上，不是行上
想让整行高亮，用 table-hover；想单列高亮，得自己加 border-start-primary + ps-3，不能指望 border-primary 自动适配列方向
table-responsive 必须包住整个 table，且内部不能有 table 嵌套，否则横向滚动失效