.bootstrap按钮的.active样式仅对添加data-bs-toggle="button"属性的切换式按钮生效，普通按钮点击不会自动添加该类；需手动添加属性并覆盖CSS（如.btn-primary.active）才能实现持久变色。
Bootstrap 按钮的 .active 样式到底作用在哪儿？
它只对带 data-bs-toggle="button" 的按钮（即切换式按钮）生效，不是所有按钮点击都会自动加 .active。普通 <button> 点击后不会保留状态，也不会触发该类——这是最常见的误解源头。
如果你只是想“点一下变色”，又没用切换逻辑，那 .active 根本不会出现，硬改也没用。
- 需要手动触发状态切换：必须加
data-bs-toggle="button"属性 - JavaScript 初始化不是必须的（Bootstrap 5+ 自动绑定）
-
.btn-group里的按钮默认就支持，但单个按钮得自己加属性
怎么让按钮点击后真正加上 .active 并改变背景色？
先确保 HTML 结构符合 Bootstrap 的切换按钮规范，再覆盖 CSS。直接改 .btn.active 是最稳妥的方式，但要注意优先级和作用域。
示例写法：
<button type="button" class="btn btn-primary" data-bs-toggle="button"> 切换按钮 </button>
CSS 覆盖建议写在 Bootstrap 引入之后，且加 !important 防止被内置样式压掉（尤其在使用 CDN 时）：
.btn-primary.active,
.btn-primary:active {
background-color: #6f42c1 !important;
border-color: #5a32a3 !important;
}
- 别只写
.btn.active，要带上具体颜色类（如.btn-primary），否则所有按钮都套同一套颜色 -
:active是鼠标按下瞬间的状态，.active才是持久状态，两个都设更稳妥 - 如果用了 Sass，直接修改
$btn-primary-active-bg变量更干净
为什么加了 .active 还不生效？常见卡点
多数是 CSS 优先级或 JS 行为没对上。Bootstrap 5 默认用 data-bs-toggle 触发，旧项目若混用 data-toggle（v4 写法），JS 不识别，自然不加类。
- 检查控制台有没有报错：
Bootstrap's JavaScript requires Popper这类提示说明 JS 没加载全 - 用 DevTools 看按钮点击后 DOM 里是否真的出现了
class="active" - 如果用了 Vue/React，原生 Bootstrap JS 可能和框架事件冲突，此时应改用框架方式管理状态（比如
v-bind:class） - 自定义主题时，如果重写了
$enable-button-classes: false，整个按钮样式系统会失效
不用 JS、不依赖 .active，纯 CSS 实现点击变色行不行？
可以，但有严重限制：仅限「鼠标按下瞬间」，松开就恢复，无法保持。因为 :active 伪类不记录状态。
这种写法适合反馈型交互（比如按下去有个视觉响应），不适合开关、选中态等需要持久标记的场景：
.btn-custom:active {
background-color: #20c997;
transform: translateY(1px);
}
- 移动端上
:active支持不稳定，部分 iOS Safari 需要给<body>加cursor: pointer才触发 - 键盘用户（Tab + Space）不会触发
:active，无障碍支持差 - 真要持久变色，还是得靠 JS 控制类名，或者换用
<input type="checkbox">+:checked模拟
复杂点在于：视觉状态、DOM 状态、可访问性状态三者得对齐。只改颜色是最浅一层，漏掉任一环，用户实际体验就会断掉。
