bootstrap 5背景类格式为bg-{color}，仅支持primary、light等预设关键字，不支持bg-red等直译色值；自定义颜色需用css变量、内联样式或扩展类，并注意文字颜色搭配与特异性覆盖。
Bootstrap 5 的背景颜色类名怎么写？
Bootstrap 5 默认只提供基础语义化背景类，比如 bg-primary、bg-success、bg-danger 这些，它们依赖于当前主题色系统。如果你直接写 bg-red 或 bg-#ff0000，浏览器不会识别——这些类根本不存在。
- 类名格式统一为
bg-{color}，其中{color}是预设关键字（如primary、secondary、light、dark、white、black） - 没有
bg-red、bg-blue这类“直译色值”的内置类 - 若用了 Sass 版本，可自定义
$theme-colors变量来扩展，但编译后才生效
想用自定义颜色，又不想写 CSS，怎么办？
Bootstrap 5.3+ 支持通过 CSS 自定义属性（CSS variables）动态注入颜色，配合 bg-opacity 和 bg-gradient 等辅助类能快速组合效果，但纯背景色仍需手动加样式或扩展类。
- 最轻量做法：在 HTML 中内联
style="background-color: #2a5800;"，适合单次使用 - 更可持续的做法：在自定义 CSS 文件中添加类似这样的规则：
.bg-forest { background-color: #2a5800 !important; } - 注意加
!important，否则可能被 Bootstrap 原生类的特异性覆盖（尤其在使用bg-dark等深色类时）
为什么 bg-white 不生效，或者文字看不见？
常见原因是文本颜色与背景冲突，比如在 bg-white 容器里用了默认的深灰文字，看起来像“没生效”，其实是对比度太低。
-
bg-white只设背景，不改文字颜色；同理bg-black也不自动配白字 - 需手动搭配文字颜色类，例如：
bg-white text-dark或bg-black text-white - 如果用了
bg-opacity-10这类透明度类，要注意它只作用于背景色（通过rgba()实现），不改变元素本身透明度
Bootstrap 4 和 5 的背景类有啥关键差异？
最实际的影响是：Bootstrap 4 有 bg-muted，而 Bootstrap 5 已移除；同时 5 默认启用了 prefers-reduced-motion 相关逻辑，但对背景类无直接影响。
- Bootstrap 4 支持
bg-faded（已废弃）、bg-inverse（已移除） - Bootstrap 5 新增了
bg-body（对应var(--bs-body-bg)），更适配主题切换 - 所有背景类默认带
background-clip: border-box，圆角（rounded）下不会溢出，这点容易被忽略，但关系到视觉一致性
用自定义色时，别只盯着类名有没有，先查你用的是不是完整版 CSS（CDN 地址是否含 dist/css/bootstrap.min.css），再确认有没有被其他 CSS 规则意外覆盖。
