Bootstrap 5 表格样式依赖标准 HTML 结构，必须包含 <thead>、<tbody>、<th>、<td>；仅加 .table 是基础，.table-striped 等叠加类需满足结构与上下文约束才生效。
Bootstrap 5 的实用类不是靠死记，而是靠理解结构和组合逻辑；直接背 .table-striped 或 .btn-primary 容易漏掉关键约束条件，比如缺失父容器、未引入 Popper、或在非语义化标签里强行套用。
表格类怎么配才不出错
Bootstrap 5 表格样式依赖标准 HTML 结构，<thead>、<tbody>、<th>、<td> 缺一不可。只加 .table 是基础，但常见问题出在叠加类的顺序和上下文：
-
.table-striped只对<tbody>内的<tr>生效，如果手写表格时漏了<tbody>，条纹就消失 -
.table-bordered会给所有边框加线，包括表头单元格之间，若想只加外边框，得配合自定义 CSS 清除内部border -
.table-hover在移动端无 hover 状态，别指望它在触摸设备上“悬停变色” - 响应式表格要用
<div class="table-responsive">包裹整个<table>，不是加在<table>标签上
按钮类的 color + variant 组合规则
Bootstrap 5 按钮类分两层：颜色语义（primary、danger、success）和形态变体（btn、btn-outline-、btn-sm、btn-lg）。错误常出现在：
- 漏写基础类
btn—— 单独用btn-primary不生效，必须是btn btn-primary -
btn-outline-和btn-不能混用，比如btn btn-outline-primary btn-danger会冲突，后者覆盖前者 -
btn-block在 v5 中已被移除，需改用col-12或d-grid gap-2+gap-2控制宽度 - 禁用状态要同时加
disabled属性和disabled类，光加类不阻止点击事件
响应式断点类命名的实际含义
Bootstrap 5 断点前缀如 col-md-6、d-lg-none 看似简单，但容易误解“生效时机”：
-
md表示“≥768px”，不是“仅在中屏”，所以col-md-6 col-lg-4是合法叠加，小屏回退到默认（即col行为） -
d-none d-md-block才是“小屏隐藏、中屏及以上显示”，反过来写d-md-none d-block会导致所有尺寸都显示（因为d-block无断点，全局生效） -
visually-hidden和visually-hidden-focusable替代了旧版的sr-only，专用于屏幕阅读器，不影响布局流 - 断点类不支持“负向逻辑”，没有
not-md这种写法，需要靠组合多个断点类实现
为什么有些类写了没反应
最常被忽略的是环境前提，不是类写错了，而是缺了支撑条件：
- 所有 JS 组件（如
dropdown、modal）依赖@popperjs/core，只引入 Bootstrap CSS 不够，必须确保popper已加载且版本匹配（v5.3+ 要求 Popper v2.11+） -
form-control对<input>有效，但对<textarea>或<select>需额外加form-select或保持原生样式逻辑 - 自定义属性如
data-bs-toggle="tooltip"必须配合 JS 初始化，否则 tooltip 不出现；纯 HTML 写法不自动激活 - 使用 Sass 自定义主题时，如果覆盖了
$enable-important-utilities为false，那所有带!important的工具类（如fw-bold）都会失效
真正卡住人的往往不是某个类名记不住，而是没意识到 Bootstrap 5 的类之间有隐含依赖关系——比如 .table-hover 依赖 :hover 媒体能力，.d-flex 依赖父容器未设 display: contents，这些细节不查文档很难凭直觉发现。
