Bootstrap 5 颜色系统教程 - 主题色彩与颜色工具

Bootstrap 5 颜色系统

Bootstrap 5 提供了一套完整的颜色系统，包含主题颜色、语义颜色和实用工具类，帮助您快速构建美观的界面。

颜色系统基于CSS自定义属性（CSS变量），使得主题定制变得更加简单。

主要颜色类别：

主题颜色 - 主要、次要、成功、危险、警告、信息等
中性颜色 - 浅色、深色、白色、黑色等
扩展颜色 - 紫色、粉色、橙色等

颜色系统优势

一致的配色方案
语义化的颜色命名
易于定制和扩展
响应式颜色变体
无障碍设计考虑

主题颜色调色板

主要

#6f42c1

次要

#6c757d

成功

#198754

危险

#dc3545

警告

#ffc107

信息

#0dcaf0

浅色

#f8f9fa

深色

#212529

<div class="bg-primary">主要背景</div>
<div class="bg-secondary">次要背景</div>
<div class="bg-success">成功背景</div>
<div class="bg-danger">危险背景</div>
<div class="bg-warning">警告背景</div>
<div class="bg-info">信息背景</div>
<div class="bg-light">浅色背景</div>
<div class="bg-dark">深色背景</div>

扩展颜色

粉色

#e83e8c

紫色

#6f42c1

橙色

#fd7e14

青色

#20c997

靛蓝色

#6610f2

青色

#0dcaf0

/* 使用 CSS 变量 */
:root {
  --bs-pink: #e83e8c;
  --bs-purple: #6f42c1;
  --bs-orange: #fd7e14;
  --bs-teal: #20c997;
  --bs-indigo: #6610f2;
  --bs-cyan: #0dcaf0;
}

文本颜色

使用 .text-* 类为文本设置颜色。

.text-primary - 主要文本

.text-secondary - 次要文本

.text-success - 成功文本

.text-danger - 危险文本

.text-warning - 警告文本

.text-info - 信息文本

.text-light - 浅色文本

.text-dark - 深色文本

.text-body - 主体文本

.text-muted - 弱化文本

.text-white - 白色文本

<p class="text-primary">.text-primary - 主要文本</p>
<p class="text-secondary">.text-secondary - 次要文本</p>
<p class="text-success">.text-success - 成功文本</p>
<p class="text-danger">.text-danger - 危险文本</p>
<p class="text-warning bg-dark">.text-warning - 警告文本</p>
<p class="text-info bg-dark">.text-info - 信息文本</p>

链接颜色

使用颜色类为链接设置颜色。

主要链接
次要链接
成功链接
危险链接
警告链接
信息链接

背景颜色

使用 .bg-* 类设置元素背景颜色。

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-dark">.bg-info</div>

背景渐变

使用 .bg-gradient 类添加背景渐变效果。

主要渐变

成功渐变

危险渐变

<div class="bg-primary bg-gradient">主要渐变</div>
<div class="bg-success bg-gradient">成功渐变</div>
<div class="bg-danger bg-gradient">危险渐变</div>

边框颜色

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

.border-primary

.border-secondary

.border-success

.border-danger

.border-warning

.border-info

.border-light

.border-dark

.border-white

<div class="border border-primary p-2">.border-primary</div>
<div class="border border-secondary p-2">.border-secondary</div>
<div class="border border-success p-2">.border-success</div>
<div class="border border-danger p-2">.border-danger</div>
<div class="border border-warning p-2">.border-warning</div>
<div class="border border-info p-2">.border-info</div>

边框透明度

使用 .border-opacity-* 类调整边框透明度。

.border-opacity-100

.border-opacity-75

.border-opacity-50

.border-opacity-25

按钮颜色

使用 .btn-* 类设置按钮颜色变体。

<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>

轮廓按钮

使用 .btn-outline-* 类创建轮廓按钮。

徽章颜色

使用 .badge-* 类设置徽章颜色。

主要徽章次要徽章成功徽章危险徽章警告徽章信息徽章浅色徽章深色徽章

<span class="badge bg-primary">主要徽章</span>
<span class="badge bg-secondary">次要徽章</span>
<span class="badge bg-success">成功徽章</span>
<span class="badge bg-danger">危险徽章</span>
<span class="badge bg-warning text-dark">警告徽章</span>
<span class="badge bg-info text-dark">信息徽章</span>

轮廓徽章

使用 .border 和文本颜色类创建轮廓徽章。

主要轮廓次要轮廓成功轮廓危险轮廓警告轮廓信息轮廓

警报颜色

使用 .alert-* 类设置警报颜色。

这是一个主要警报—请检查！

这是一个次要警报—请检查！

这是一个成功警报—请检查！

这是一个危险警报—请检查！

这是一个警告警报—请检查！

这是一个信息警报—请检查！

这是一个浅色警报—请检查！

这是一个深色警报—请检查！

<div class="alert alert-primary" role="alert">
  这是一个主要警报—请检查！
</div>
<div class="alert alert-secondary" role="alert">
  这是一个次要警报—请检查！
</div>
<div class="alert alert-success" role="alert">
  这是一个成功警报—请检查！
</div>
<div class="alert alert-danger" role="alert">
  这是一个危险警报—请检查！
</div>

自定义颜色

Bootstrap 5 使用 CSS 自定义属性（CSS 变量），使得颜色定制变得简单。

您可以通过覆盖 CSS 变量来自定义主题颜色：

:root {
  --bs-primary: #your-color;
  --bs-secondary: #your-color;
  --bs-success: #your-color;
  --bs-danger: #your-color;
  --bs-warning: #your-color;
  --bs-info: #your-color;
}

或者使用 Sass 变量进行更深入的定制：

// 自定义主题颜色
$primary: #your-color;
$secondary: #your-color;
$success: #your-color;
$danger: #your-color;
$warning: #your-color;
$info: #your-color;

// 导入 Bootstrap
@import "bootstrap";

颜色工具类生成

Bootstrap 会自动为每种颜色生成一系列工具类：

.text-{color} - 文本颜色
.bg-{color} - 背景颜色
.border-{color} - 边框颜色
.btn-{color} - 按钮颜色
.alert-{color} - 警报颜色
.badge-{color} - 徽章颜色

响应式颜色

某些颜色工具类支持响应式变体：

<div class="text-primary text-md-success text-lg-danger">
  响应式文本颜色
</div>

颜色使用最佳实践

语义化使用

根据内容含义选择合适的颜色
使用成功颜色表示积极操作
使用危险颜色表示破坏性操作
保持颜色使用的一致性

无障碍设计

确保文本与背景有足够的对比度
避免仅使用颜色传达信息
测试色盲用户的可访问性
遵循 WCAG 2.1 AA 标准

品牌一致性

将品牌颜色融入主题颜色
创建自定义颜色变量保持一致性
在整个应用中统一使用颜色
建立颜色使用规范

用户体验

使用颜色引导用户注意力
避免过度使用鲜艳颜色
考虑不同文化对颜色的理解
测试不同环境下的可读性

掌握颜色系统后，下一步学习间距工具

颜色系统是视觉设计的基础，接下来可以学习如何使用间距工具类创建合理的布局和层次结构。

学习间距工具查看所有组件

Bootstrap5教程

Bootstrap5 颜色系统

Bootstrap 5 颜色系统