Bootstrap5 颜色 – BuildCodePro

Bootstrap 5 颜色系统详解

编程小白也能理解的Bootstrap颜色知识大全

主题颜色背景色文本颜色实用工具自定义

主题颜色 – 核心配色方案

Bootstrap 5 定义了8个核心主题颜色，这些颜色用于整个框架的各种组件中。

主色 (primary)

用于主要操作、按钮和重要元素

次要色 (secondary)

用于次要操作和不太重要的元素

成功色 (success)

表示成功、积极的反馈

危险色 (danger)

表示错误、危险操作或警告

警告色 (warning)

表示警告或需要注意的情况

信息色 (info)

用于信息提示和中立消息

浅色 (light)

浅色背景，深色文字

深色 (dark)

深色背景，浅色文字

                            <div class=”bg-primary”>主色背景</div>

                            <div class=”text-success”>成功文字</div>

                            <button class=”btn btn-warning”>警告按钮</button>

背景颜色 – 设置元素背景

使用 .bg-* 类可以轻松设置元素的背景颜色。

bg-primary

bg-success

bg-danger

bg-warning

bg-info

bg-secondary

背景渐变效果：添加 .bg-gradient 类实现平滑渐变

渐变主色

渐变成功色

                            <div class=”bg-primary”>纯色背景</div>

                            <div class=”bg-success bg-gradient”>渐变背景</div>

文本颜色 – 设置文字颜色

使用 .text-* 类可以设置文本颜色，与背景颜色使用相同的颜色名称。

这是主色文本 (.text-primary)

这是成功色文本 (.text-success)

这是危险色文本 (.text-danger)

这是警告色文本 (.text-warning)

这是信息色文本 (.text-info)

这是柔和的文本 (.text-muted)

设置文本不透明度：

正常不透明度

75%不透明度

50%不透明度

25%不透明度

                            <p class=”text-primary”>主色文字</p>

                            <p class=”text-success”>成功文字</p>

                            <p class=”text-danger”>危险文字</p>

                            <span class=”text-muted”>辅助文字</span>

边框颜色 – 设置元素边框

使用 .border-* 类设置元素的边框颜色。

主色边框 (.border-primary)

成功色边框 (.border-success)

危险色边框 (.border-danger)

警告色边框 (.border-warning)

设置边框不透明度：

75%不透明度

50%不透明度

                            <div class=”border border-primary”>主色边框</div>

                            <div class=”border border-success”>成功边框</div>

                            <div class=”border-top border-danger”>上边框红色</div>

按钮颜色 – 应用主题色

按钮是最常用到主题颜色的组件之一。

描边按钮：添加 .btn-outline-*

                            <button class=”btn btn-primary”>主色按钮</button>

                            <button class=”btn btn-outline-success”>成功描边按钮</button>

自定义颜色 – 修改默认主题

Bootstrap 5 使用CSS变量，使得自定义颜色非常简单。

在自定义CSS中覆盖默认颜色：

                            :root {

                              –bs-primary: #6f42c1; /* 紫色 */

                              –bs-success: #20c997; /* 蓝绿色 */

                              –bs-danger: #fd7e14; /* 橙色 */

                            }

或者通过SASS变量覆盖：

                            $primary: #6f42c1;

                            $success: #20c997;

                            $danger: #fd7e14;

                            @import “bootstrap/scss/bootstrap”;

实用工具 – 颜色辅助类

.link-* 类用于设置链接颜色：

主色链接 | 成功链接 | 危险链接

背景和文本颜色实用工具：

.bg-body – 页面主体背景
.bg-transparent – 透明背景
.text-white – 白色文本
.text-black – 黑色文本
.text-white-50 – 50%不透明白色文本

                            <a href=”#” class=”link-danger”>危险链接</a>

                            <div class=”bg-transparent”>透明背景</div>

                            <div class=”text-white bg-dark”>白色文字</div>

颜色对比度与可访问性

为了确保所有用户（包括视障用户）都能清晰阅读内容，Bootstrap确保所有颜色组合符合WCAG 2.0对比度标准。

正确示例

白色文字在深色背景上有足够对比度（4.5:1）

深色：.bg-primary + .text-white

错误示例

白色文字在黄色背景上对比度不足（2.3:1）

应使用深色文字：.bg-warning + .text-dark

对比度检测工具

在设计时可以使用以下工具检测颜色对比度：

WebAIM对比度检查器
Chrome开发者工具中的色彩对比度检测功能
在线色彩对比度分析工具