最省事的背景色方案是直接使用Bootstrap内置的.bg-*类，如.bg-primary、.bg-success等，它们基于主题变量、语义清晰、开箱即用，且支持主题联动；需注意透明度、深色模式可读性及渐变类的覆盖特性。
直接用 .bg-* 类是最省事的方案
bootstrap 内置了一套语义清晰、开箱即用的背景色工具类，比如 .bg-primary、.bg-success、.bg-light，它们直接作用于元素，一行 class 就生效，不用写额外 css。
这些类底层就是 background-color 声明，且已适配 Bootstrap 的主题色系统（如 $primary 变量），改主题时会自动联动。适用于按钮、卡片、提示框、行内容器等大多数场景。
- 别手写
style="background-color: #007bff"—— 失去响应式语义和主题一致性 - 注意：默认不带透明度，若需半透效果（如遮罩层），得自己加
rgba()或额外类 -
.bg-dark在深色模式下可能对比度不足，建议搭配.text-light保证可读性
.bg-gradient-* 不是简单换色，而是启用渐变渲染
Bootstrap 5.3+ 提供了 .bg-gradient-primary 这类类，它不是覆盖单色，而是通过 background-image: linear-gradient() 实现左右/上下渐变，视觉上更现代。
但要注意：它不会“叠加”在原有背景色上，而是完全替代；如果父容器已有背景图或色，会被覆盖。常见于 banner 区、CTA 按钮、强调卡片头部。
- 必须确保目标元素有足够高度/内容撑开，否则渐变不可见
- 不支持自定义方向（如
to bottom right），方向由类名固定：.bg-gradient-primary默认to right - 若要垂直渐变，得手动写 CSS：
.bg-gradient-vertical { background-image: linear-gradient(to bottom, #007bff, #6f42c1); }
改进度条底色别动 .progress-bar，要改外层 .progress
很多人想调进度条灰色底，却去覆盖 .progress-bar 的背景，结果只是改了“已填充部分”，底色还是 Bootstrap 默认的 #e9ecef——造成视觉割裂。
真正控制底色的是包裹容器 .progress 自身的 background-color。只要给它加个自定义类，比如 .progress-custom-bg，再在 CSS 里声明即可。
- 推荐写法：
<div class="progress progress-custom-bg"><div class="progress-bar"></div></div> - CSS 中写：
.progress-custom-bg { background-color: #f0f4f8; }，不要加!important - Bootstrap 5+ 的
.progress默认不透明，所以改完立刻可见；旧版若无效，检查是否被其他样式覆盖了优先级
自定义颜色别硬写 HEX，优先走 $theme-colors 扩展
如果项目里需要 .bg-navy 或 .text-gold 这种非内置色，最稳妥的方式不是单独写类，而是扩展 Bootstrap 的 Sass 主题映射 $theme-colors。
这样生成的工具类（.bg-navy、.border-navy、.text-navy）才能和原生色完全一致，包括 hover 状态、禁用态、阴影推导逻辑。
- 新建
custom.scss，先定义变量：$navy: #001f3f;，再扩展映射：$theme-colors: map-merge($theme-colors, ("navy": $navy)); - 必须在
@import "bootstrap/scss/bootstrap"之前执行，顺序错了变量不生效 - 切勿直接修改
bootstrap.min.css或用大量!important覆盖——维护成本高，升级易崩
$primary 就万事大吉，却漏掉 $theme-colors 映射更新，导致 .bg-primary 生效了，.text-primary 却还是旧色。这种错位问题调试起来特别费时间。
