bootstrap 5 的 text- 和 bg- 类绑定 sass 变量而非固定 hex 值,应优先按语义使用类名;默认 primary 为 #0d6efd,secondary 为 #6c757d,success 为 #198754,info 为 #0dcaf0,warning 为 #ffc107,danger 为 #dc3545,light 为 #f8f9fa,dark 为 #212529,black/white 为硬编码;text-muted 对应 $gray-600(#6c757d),text-body 等于 $body-color(#212529),text-dark 为 $dark(#343a40);深色模式下仅 bg-body 等少数类自动切换,其余需手动适配;自定义颜色应扩展 $theme-colors 而非硬写 hex。

Bootstrap 5 的 text-* 和 bg-* 类不直接等于某个固定 HEX 值,而是绑定 Sass 变量(如 $primary),默认值可查,但自定义主题后会变;硬记 HEX 容易踩坑,应优先按语义用类名,而非反向查色值。
默认 $theme-colors 对应的 HEX 值(5.3+ 官方默认)
这些是未修改 Bootstrap 源码时,text-primary、bg-success 等类实际渲染出的颜色(基于 $theme-colors 映射):
-
primary:#0d6efd(不是 #007bff,旧版遗留印象要更新) -
secondary:#6c757d(注意不是纯灰 #808080) -
success:#198754(比常见绿色 #28a745 更深更稳) -
info:#0dcaf0(青蓝色,非浅蓝 #17a2b8) -
warning:#ffc107(明黄色,饱和度高,慎用于深色背景) -
danger:#dc3545(非大红 #ff0000,带暗调更易读) -
light:#f8f9fa(极浅灰,bg-light在白底上几乎不可见) -
dark:#212529(接近黑但非 #000,text-dark比text-body更深) -
black:#000(硬编码,不走变量) -
white:#fff(同理,固定值)
text-muted 和 text-body 不是灰色系简单叠加
这两个类最容易被当成“透明度降低”,其实完全不是:
-
text-muted固定对应$gray-600→#6c757d,和opacity无关;加opacity-50会双重变淡,反而失真 -
text-body等于$body-color→ 默认#212529,是正文主色,不是“未设置颜色”的 fallback -
text-dark是$dark→#343a40,比text-body深,别混用 - 没有
text-white-50这种类;要半透明白字,必须组合text-white opacity-50
深色模式下颜色不会自动反转,bg-body 是关键例外
Bootstrap 5 原生支持深色模式,但多数 bg-* 类(如 bg-light、bg-primary)仍按亮色主题渲染,只有少数类响应模式切换:
-
bg-body会随data-bs-theme="dark"切换为#212529(深色正文底色) -
bg-dark始终是#343a40,不响应深色模式 -
text-body在深色模式下仍为#212529,可能和背景同色——此时需显式加text-light或自定义类 - 渐变类如
bg-gradient-primary仅基于$primary计算,深色模式下对比度可能不足,得手动覆盖
想加自定义色?别写死 HEX,走 $theme-colors 扩展
硬加 class="text-navy" 并写 CSS 是下策;正确路径是 Sass 层扩展主题:
- 在自定义 Sass 文件中重定义:
$theme-colors: (navy: #001f3f, gold: #FFD700, ...) - 编译后即可用
text-navy、bg-gold,且自动获得text-navy-emphasis等派生类 - 漏掉
$theme-color-interval会导致深色模式下亮度计算错误(比如text-navy在暗背景下变成不可读的深蓝) - 不要用
!important覆盖内置类——它会破坏主题联动和响应逻辑
真正麻烦的从来不是查 HEX 表,而是假设“类名 = 静态颜色”;一旦项目启用深色模式、定制主题或升级 Bootstrap 版本,所有硬编码色值都会失效。语义类名才是稳定接口,HEX 只该出现在 Sass 变量定义里,而不是 HTML class 属性中。











