Bootstrap文字颜色类（如text-primary）失效主因是未正确加载含CSS变量的样式文件或构建配置错误；v5.3+语义灰度类（如text-body-tertiary）依赖color-mix()和主题数据属性，旧浏览器不支持；自定义颜色须遵循text-前缀规范或通过Sass变量扩展。
text-primary 等类名为什么加了没反应
bootstrap 的文字颜色工具类（如 text-primary）依赖于 css 变量或预编译时生成的对应规则，不是所有版本都默认启用。v5.3+ 默认启用，但如果你用的是自定义构建、cdn 引入未带 css 变量支持的压缩版，或漏掉了 bootstrap.css 而只引入了 js，就会完全不生效。
- 检查是否正确加载了 Bootstrap 样式文件（不是仅
bootstrap.bundle.js） - v5.0+ 推荐用
bootstrap.min.css或完整版bootstrap.css，避免用仅含 JS 的 bundle - 若用 Sass 自定义，确认
$enable-css-variables: true已开启，且text-colorsmap 未被覆盖 - 浏览器开发者工具里搜
.text-primary，看是否被加载、是否被更高优先级样式覆盖（比如!important写在别的地方）
如何用 text-body-tertiary 这类语义类控制灰度
Bootstrap v5.3+ 新增了 text-body-secondary、text-body-tertiary 等语义化灰度类，它们不是固定色值，而是基于当前 body 的颜色和透明度动态计算——这意味着深色模式下会自动变浅，适配性更好，但代价是依赖 CSS 变量和 color-mix()（部分旧浏览器不支持）。
- 必须确保页面根元素有
data-bs-theme="dark"或系统级prefers-color-scheme生效，否则text-body-tertiary在 light 主题下只是rgba(0, 0, 0, .45) - IE 和 Safari 16.3 之前不支持
color-mix()，这类类名会退化为 fallback 颜色（如果定义了）或直接失效 - 不要用它替代
text-muted做“禁用态”提示——text-muted是固定低对比度灰，而text-body-tertiary是上下文感知的，语义不同
自定义颜色类时 class 名别乱加 -text 后缀
Bootstrap 官方约定：所有文本颜色工具类必须以 text- 开头，否则不会被其颜色系统识别。你手动加个 my-red 不会自动获得响应式变体（如 text-sm-my-red），也不会参与主题切换逻辑。
- 扩展颜色要走官方方式：Sass 中修改
$theme-colorsmap，然后重新编译；或用 CSS 变量覆盖--bs-text-primary-rgb等 - 如果只是临时单点改色，直接写内联
style="color: #e63946;"比硬造非标准类更轻量、更可控 - 注意
text-white和text-dark是特殊处理的——它们不走 RGB 变量，而是直接设color: #fff/#212529，所以改--bs-text-white-rgb对它无效
dark mode 下 text-light 为什么反而看不见
text-light 的设计目标是在深色背景上显示浅色文字，但它本身是固定色值 #f8f9fa（接近白），在 dark mode 的 background-color: #212529 上对比度足够；但如果父容器用了自定义深色背景（比如 #0d1117），而你又没同步更新 text-light 的定义，就可能因对比度过低导致文字“隐形”。
- 检查是否启用了 Bootstrap 的 dark mode 切换机制：需在
或加data-bs-theme="dark" -
text-light在 dark mode 下不会自动变深——它始终是浅色，适合深背景；真要适配双主题，得用text-body-secondary这类动态类 - 用浏览器“无障碍检查”功能测实际对比度，WCAG AA 要求至少 4.5:1；
text-light在#0d1117上只有 ~3.8:1，确实不够
