Bootstrap颜色类提供语义化文本/背景工具类，支持响应式、深色模式及可访问性标准，但存在维护性风险与定制限制。
一、Bootstrap颜色类的基本用法
Bootstrap 提供了一组预定义的颜色工具类，用于快速设置文本颜色、背景色及状态色，无需编写自定义 CSS。这些类基于语义化命名（如 text-primary、bg-success），直接作用于 HTML 元素即可生效。
1、为段落文本添加主色调：在 <p> 标签中加入 class="text-primary"。
2、为 div 容器设置浅灰色背景：添加 class="bg-light"。
3、对按钮应用危险色文本与背景组合：同时使用 class="text-white bg-danger"。
4、为链接添加悬停时的文本变色效果：添加 class="text-muted" 并确保父容器未禁用 :hover 行为。
二、文本颜色类的语义化映射规则
Bootstrap 文本颜色类以 text- 为前缀，后接颜色名或语义关键词，其实际渲染依赖于 SCSS 变量体系，例如 text-primary 对应 $primary 颜色变量值，在深色模式下可能自动适配为高对比度变体。
1、基础色类包括 text-primary、text-secondary、text-success、text-danger、text-warning、text-info、text-light、text-dark、text-body、text-muted、text-white、text-black。
2、响应式文本颜色支持：可添加屏幕断点前缀，如 text-sm-success 在小屏幕及以上启用 success 色，text-md-muted 在中等屏幕启用 muted 色。
3、深色模式兼容类需配合 data-bs-theme="dark" 属性或根元素 class="dark-mode" 使用，部分版本需手动启用 dark 模式编译。
三、背景颜色类的边界与限制
背景类（bg-*）默认不设置文本颜色，可能导致可访问性问题，例如 bg-light 与默认 text-dark 组合在浅色主题下正常，但在某些定制主题中可能产生低对比度；此外，bg-* 类不继承父级透明度，且无法直接控制 background-size 或 background-position。
1、避免将 bg-white 与 text-white 同时使用，否则文字不可见。
2、若需半透明背景，不可仅依赖 bg-* 类，须额外添加 style="background-color: rgba(255, 255, 255, 0.8)" 或自定义 SCSS 变量。
3、使用 bg-gradient-* 类时，必须确保父容器有明确高度或内边距，否则渐变不可见。
四、辅助类的可访问性优势
Bootstrap 辅助类内置 WCAG 2.1 AA 级对比度校验逻辑，例如 text-success 的绿色与背景组合满足最小 4.5:1 对比度要求，text-white 在 bg-dark 上自动启用更高亮度变体，提升视障用户阅读体验。
1、所有语义色类均通过自动化测试验证对比度阈值，无需开发者手动计算。
2、sr-only 与 visually-hidden 类提供屏幕阅读器专用隐藏机制，不影响视觉布局。
3、text-truncate 类结合 max-width 和 overflow: hidden，保障长文本在窄容器中安全截断并添加省略号。
五、辅助类的维护性风险
过度依赖辅助类会导致 HTML 结构膨胀、语义弱化及样式耦合，当项目需要统一调整品牌色或响应式断点行为时，需全局搜索替换 class 值，而非集中修改一处 CSS 变量，增加重构成本。
1、在复杂组件中混用 text-danger、bg-warning、border-info 等多个辅助类，会使 DOM 层级难以追踪真实样式意图。
2、升级 Bootstrap 版本时，部分辅助类（如 text-gray-700）可能被移除或重命名，导致构建警告或样式丢失。
3、辅助类不支持 CSS 自定义属性注入，无法通过 JavaScript 动态切换主题色，如需运行时换肤必须搭配额外 JS 逻辑或 CSS-in-JS 方案。
