Bootstrap如何通过Background工具类调整背景颜色？

本文共计799个文字，预计阅读时间需要4分钟。

Bootstrap 5 默认仅提供基础语义化背景类，例如 `bg-primary`、`bg-success`、`bg-danger` 等，这些类依赖于当前主题色系统。若直接写入 `bg-red` 或 `bg-`，则需要确保这些颜色值与主题色系统一致。

• 类名格式统一为 bg-{color}，其中 {color} 是预设关键字（如 primary、secondary、light、dark、white、black）
• 没有 bg-red、bg-blue 这类“直译色值”的内置类
• 若用了 Sass 版本，可自定义 $theme-colors 变量来扩展，但编译后才生效

想用自定义颜色，又不想写 CSS，怎么办？

Bootstrap 5.3+ 支持通过 CSS 自定义属性（CSS variables）动态注入颜色，配合 bg-opacity 和 bg-gradient 等辅助类能快速组合效果，但纯背景色仍需手动加样式或扩展类。