Bootstrap中常用的文本颜色、背景颜色及边框色类

Bootstrap文本色类严格映射theme-colors变量：text-primary为#0d6efd，text-success为#198754；text-body继承color值，text-black/white硬编码为#000/#fff，text-muted为#6c757d；深色模式需手动启用且不自动翻转。text-primary 到 text-white 这些类到底对应什么颜色Bootstrap 的文本色类不是随便起的，而是严格绑定到 theme-colors Sass 变量映射表里。默认情况下，text-primary 就是 primary 变量值（#0d6efd），text-success 对应 success（#198754），以此类推。最常被忽略的是：text-body 不是灰色，而是当前 color 继承值；text-black 和 text-white 是硬编码的 #000 / #fff，不走主题变量。text-muted 用的是 $gray-600（#6c757d），不是透明度降低，别指望它随 opacity 动态变化深色模式下这些类**不会自动翻转**------Bootstrap 5.3+ 要配合 data-bs-theme="dark" 手动切换，且需确保你启用了 bootstrap-dark.css 或编译时开启 dark 模式支持如果重定义了 Sass 变量但没重新编译 CSS，页面里还是旧颜色------光改 _variables.scss 不生效bg-light、bg-dark 和 bg-opacity-* 怎么配合用才不踩坑背景色类和透明度类不能混写成 bg-dark bg-opacity-50 ------ Bootstrap 5.2+ 才支持这种组合，老版本会失效。真正生效的逻辑是：bg-opacity-* 会覆盖元素的 background-color 为 rgba() 形式，并设 background-image: none，所以它只对纯色背景有效。bg-dark 默认是 #212529，但加了 bg-opacity-25 后变成 rgba(33, 37, 41, 0.25)，此时如果父容器有背景图，就会透出底层内容bg-transparent 是个独立类，它直接设 background-color: transparent，和 bg-opacity-0 行为不同------后者仍保留原色通道，只是 alpha=0，某些场景下渲染表现有细微差异不要对 button 元素滥用 bg-opacity：Firefox 下可能触发按钮焦点 outline 渲染异常border-primary、border-0 和 border-opacity-* 的实际行为差异边框类和文本/背景类逻辑不一致：border-primary 设置的是 border-color，而 border-0 是 border: 0，二者优先级不同。更关键的是：border-opacity-* 类根本不存在------Bootstrap 官方没提供边框透明度工具类，想调边框透明度得自己写 style="border-color: rgba(...)" 或用 Sass 自定义。 Trenz AI驱动的社交电商营销平台，专为TikTok Shop设计