bg-body-secondary 是 Bootstrap 5.3+ 的语义化二级主体背景类，浅色下默认 #e9ecef、深色下自动变为 #343a40，由 $body-bg 动态计算得出，并响应 data-bs-theme 切换。
bg-body-secondary 是什么颜色，值固定吗
bg-body-secondary 是 Bootstrap 5.3+ 引入的语义化背景工具类，对应 CSS 变量 --bs-body-secondary-bg。它的默认值是 #e9ecef（浅灰），但不是硬编码值——它由 Sass 变量 $body-secondary-bg 编译生成，该变量本身依赖于 $body-bg 和透明度叠加逻辑（例如 color-mix(in srgb, $body-bg 90%, $white 10%)）。
这意味着：
- 在纯浅色主题下，它稳定输出
#e9ecef - 若你自定义了
$body-bg（比如改成#f0f5ff），bg-body-secondary会自动变浅，保持层级关系 - 它响应
data-bs-theme="dark"切换：深色模式下，--bs-body-secondary-bg会被重设为#343a40（比bg-body稍深），而非维持浅灰
和 bg-body-tertiary、bg-light 有什么本质区别
三者语义与行为完全不同，不能互换：
-
bg-body-secondary表示“二级主体背景”，用于卡片边框内侧、表单分组区、模态框头部等需视觉降级但仍有明确容器感的区域 -
bg-body-tertiary是“三级主体背景”，值固定为#f8f9fa，不响应深色模式，在data-bs-theme="dark"下会突兀发亮 -
bg-light是“浅色背景”通用类，绑定--bs-light-bg（默认同为#f8f9fa），但语义中性，无层级暗示，也不参与主题变量链
常见误用：用 bg-light 替代 bg-body-secondary 实现表单分组背景 —— 看似效果接近，但当项目启用深色模式时，bg-light 仍为浅灰，而 bg-body-secondary 已自动变为适配深色的灰阶，可访问性更稳。
为什么在深色模式下 text-body-secondary 比 text-muted 更可靠
因为 text-body-secondary 和 bg-body-secondary 共享同一套动态计算逻辑：
- 浅色模式：
text-body-secondary→color-mix(in srgb, currentColor 60%, transparent)→ 约#6c757d - 深色模式：
text-body-secondary→ 同样公式，但基于深色currentColor（#f8f9fa）→ 输出约rgba(248,249,250,0.6)，确保与深背景有足够对比
而 text-muted 直接硬编码为 $gray-600（#6c757d），在深色背景下几乎不可读。
如果你给一个 bg-body-secondary 区域配文字，优先选 text-body-secondary，而不是 text-muted 或 text-dark。
什么时候该避免直接用 bg-body-secondary
它适合快速构建符合 Bootstrap 层级语义的 UI，但有明确边界：
- 不要用于需要精确色值控制的场景（比如品牌色对齐），它的输出受
$body-bg和编译时函数影响，无法从 JS 读取或 runtime 覆盖 - 不要嵌套在已设
background-image的容器里 ——bg-body-secondary会覆盖背景图（它设的是background-color） - 不要期望它和
bg-primary-subtle行为一致：bg-primary-subtle是color-mix(in srgb, $primary 10%, $white)，而bg-body-secondary基于 body 色，二者混合逻辑不同，混用可能导致灰阶跳跃
真正容易被忽略的一点：它的存在意义不在“颜色多好看”，而在让组件在主题切换时自动维持相对明度差——这个隐式契约，比任何单次渲染的颜色值都重要。
