bootstrap 5 中按钮必须同时使用 .btn 基础类与功能类（如 .btn-primary），单独写 .btn-primary 不生效；.btn 提供 padding、border、cursor 等共性样式，颜色/尺寸/状态类须与其共存。
button类名和.btn组合规则必须同时存在
单独写 .btn-primary 不生效，Bootstrap 5 要求所有按钮必须带基础类 .btn，否则样式完全丢失。这是最常被忽略的前提，尤其从旧版本迁移或抄片段时容易漏掉。
常见错误现象：class="btn-primary" 看起来像按钮，实际只是普通文字，无边框、无内边距、无悬停效果。
-
.btn是必需的基础类，提供默认 padding、border、cursor、font-weight 等共性样式 - 颜色/尺寸/状态类（如
.btn-success、.btn-lg、.disabled）必须和.btn共存 - 语义类优先级高于基础类，但不会覆盖所有属性，比如
.btn-outline-danger会重置背景和边框色，但保留.btn的 padding 和圆角
区分 .btn-{color} 和 .btn-outline-{color}
这两类视觉差异明显，但初学者常混淆用途：实心款用于主操作，空心款更适合次要或危险操作（如删除），且空心款在深色背景上可读性更差，需额外注意对比度。
使用场景：.btn-primary 适合“提交”“下一步”；.btn-outline-secondary 更适合“取消”“返回”；.btn-outline-danger 专用于“删除”“清空”，自带警示暗示。
-
.btn-{color}：背景色 + 白色文字（深色文字仅用于.btn-light），hover 时加深背景 -
.btn-outline-{color}：仅边框和文字为指定色，背景透明，hover 时填充背景色 - 注意
.btn-link是特例——它移除所有边框/背景/圆角，只保留文字样式和 hover 下划线，适合嵌入段落的轻量操作
尺寸类 .btn-sm / .btn-lg 影响行高和内边距，不改变字体大小
Bootstrap 的尺寸类只调整 padding 和 border-radius，字体始终继承父容器的 font-size。这意味着如果你在小屏下缩放了根字号，.btn-sm 可能看起来比预期“大”，因为 padding 缩放比例固定，而文字没变小。
性能影响很小，但滥用会导致响应式错乱：比如在移动端堆叠多个 .btn-lg，容易撑破容器或触发横向滚动。
-
.btn-sm：padding: .25rem .5rem -
.btn（默认）：padding: .375rem .75rem -
.btn-lg：padding: .5rem 1rem - 所有尺寸类都保持
font-size: inherit，不设em或rem值
禁用状态 .disabled 和属性 disabled 的行为差异
.disabled 类只是加灰+禁用指针，**不阻止事件监听器执行**；而原生 disabled 属性既禁用交互，也阻止表单提交、焦点进入和 JS 事件冒泡。线上 bug 很多源于只加类没加属性。
常见错误现象：点击一个带 .disabled 类的按钮，控制台仍打印日志，甚至发起 API 请求。
- 正确禁用：同时加
class="btn btn-primary disabled"和disabled属性 -
.disabled类本身不修改tabindex，但disabled属性会自动移除元素的可聚焦性 - 对非
<button></button>元素（如<a></a>）只能靠.disabled类模拟，此时必须手动加pointer-events: none和tabindex="-1"才算基本可用
真正要注意的是：颜色类不是孤立的，它们依赖 .btn 的基础排版约束；禁用逻辑不能只靠视觉类补全；尺寸变化不等于字体变化——这些点一旦漏掉，调试时往往要绕一圈才回到起点。
