bg-primary 到 bg-dark 对应固定十六进制色值，如 bg-primary=#0d6efd、bg-dark=#343a40；bg-body 随主题切换而变，bg-white 恒为#fff；bg-transparent 不清除 background-image；bg-* 类不自动适配深色模式。
bg-primary 到 bg-dark 这些类对应什么颜色值
Bootstrap 5 的 bg-* 类直接映射 Sass 变量 $theme-colors，不是凭空定义的。比如 bg-primary 默认是 #0d6efd（非旧版的 #007bff），bg-success 是 #198754，bg-danger 是 #dc3545。这些值在编译时写死进 CSS，所以你 inspect 元素看到的就是最终十六进制色值。
容易踩的坑：
-
bg-dark是#343a40（深灰），不是黑色；bg-black才是#000（但 Bootstrap 5 默认不提供bg-black，得自己加） -
bg-light是#f8f9fa，接近白但带极微灰度，和bg-white（#fff）有肉眼可辨差异 -
bg-body不是白色，而是继承$body-bg变量，默认浅灰#fff仅在 light 模式下成立，深色模式下会变成#212529
bg-body 和 bg-white 完全不是一回事
bg-body 是语义化背景类，代表“容器默认背景”，它的值由 $body-bg 决定，且会随 data-bs-theme="dark" 切换而变；bg-white 是硬编码 #fff，强制纯白，不管主题怎么切都不会动。
使用场景：
- 做卡片、模态框等需要“融入页面默认背景”的区域，用
bg-body - 做 logo 区域、按钮高亮、需要绝对纯白的视觉锚点，用
bg-white - 千万别在深色模式下依赖
bg-body做“浅色底”——它此时是深灰，文字若没配text-body类，很可能看不清
bg-transparent 为什么有时看起来不透明
bg-transparent 确实把自身 background-color 设为 transparent，但它**不处理 background-image 或 background-gradient**。如果父元素有渐变背景，或你自己写了 background: linear-gradient(...)，bg-transparent 无法清除那些声明。
常见错误现象：
- 叠加了
bg-gradient后再加bg-transparent，渐变仍显示——因为后者只覆盖 color 层，不 touch image 层 - 父容器设了
background-image，子元素加bg-transparent，依然透出父级图片 - 想实现“清空所有背景”，得手动写
style="background: none"或自定义类重置background-image和background-color
深色模式下 bg-* 类不会自动变色
所有 bg-primary、bg-success 等类，都没有内置媒体查询或 CSS 自定义属性响应逻辑。它们在 light 和 dark 模式下都渲染同一个颜色值。
这意味着：
-
bg-primary在深色模式下还是#0d6efd，可能和深灰背景对比度不足，触发 WCAG 可访问性警告 - 真正适配深色模式的，是
bg-body-secondary、bg-body-tertiary这类——它们背后调用color-contrast()函数动态计算安全色值 - 如果你重定义了
$theme-colors却没同步更新$theme-color-interval，深色模式下text-body-secondary的亮度计算会失准，连带影响bg-body-*的表现
最常被忽略的一点：别指望 bg-* 类自动适配深色模式。要真支持暗色，要么用 bg-body-* 语义类，要么自己写 @media (prefers-color-scheme: dark) 覆盖，或者用 CSS 变量 + color-scheme 配合控制。否则上线后在 Safari 或 Chrome 暗色设置下，按钮文字可能直接“消失”。
