Bootstrap 4 颜色系统 - 文本与背景色彩指南

最后编辑于2025-04-14 13:34:54.6134689 +0800 CST

Bootstrap 4 颜色系统

Bootstrap 4 提供了一套精心设计的颜色系统，用于创建一致的视觉层次结构和品牌识别。这些颜色不仅仅是装饰性的，还具有语义意义，帮助用户理解界面中的信息和操作重要性。

文本颜色

使用以下类可以改变文本颜色，每种颜色都代表特定的信息或状态：

<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>

柔和的文本。

重要的文本。

执行成功的文本。

代表一些提示信息的文本。

警告文本。

危险操作文本。

副标题。

深灰色文字。

浅灰色文本（需要深色背景）。

白色文本（需要深色背景）。

文本颜色的语义含义

  • Primary: 表示主要操作或重要信息
  • Secondary: 用于次要信息或副标题
  • Success: 指示成功操作或积极结果
  • Danger: 表示错误、危险或需要立即注意的情况
  • Warning: 表示可能需要注意的情况
  • Info: 提供中性的信息性提示
  • Light: 浅色文本，通常用于深色背景
  • Dark: 深色文本，通常用于浅色背景
  • Muted: 柔和的次要文本，用于辅助信息
  • White: 白色文本，通常用于深色背景

链接颜色

这些颜色类也可以应用到链接上，链接会保持其默认的悬停行为：

<a href="#" class="text-muted">柔和的链接。</a>
<a href="#" class="text-primary">主要链接。</a>
<a href="#" class="text-success">成功链接。</a>
<a href="#" class="text-info">信息文本链接。</a>
<a href="#" class="text-warning">警告链接。</a>
<a href="#" class="text-danger">危险链接。</a>
<a href="#" class="text-secondary">副标题链接。</a>
<a href="#" class="text-dark">深灰色链接。</a>
<a href="#" class="text-light bg-dark">浅灰色链接。</a>
<a href="#" class="text-white bg-dark">白色链接。</a>
柔和的链接。
主要链接。
成功链接。
信息文本链接。
警告链接。
危险链接。
副标题链接。
深灰色链接。
浅灰色链接。
白色链接。

背景颜色

Bootstrap 4 提供了一系列背景颜色类，你可以使用这些类来设置元素的背景色：

<div class="bg-primary text-white p-2 mb-2">重要的背景颜色。</div>
<div class="bg-secondary text-white p-2 mb-2">次要的背景颜色。</div>
<div class="bg-success text-white p-2 mb-2">执行成功背景颜色。</div>
<div class="bg-info text-white p-2 mb-2">信息提示背景颜色。</div>
<div class="bg-warning text-dark p-2 mb-2">警告背景颜色。</div>
<div class="bg-danger text-white p-2 mb-2">危险背景颜色。</div>
<div class="bg-light text-dark p-2 mb-2">浅色背景。</div>
<div class="bg-dark text-white p-2 mb-2">深色背景。</div>
<div class="bg-white text-dark p-2 mb-2">白色背景。</div>
<div class="bg-transparent text-dark p-2 mb-2 border">透明背景。</div>
重要的背景颜色。
次要的背景颜色。
执行成功背景颜色。
信息提示背景颜色。
警告背景颜色。
危险背景颜色。
浅色背景。
深色背景。
白色背景。
透明背景。

注意

背景颜色类不会自动设置合适的文本颜色，需要根据背景色的深浅搭配合适的文本颜色类（如 .text-white 或 .text-dark）。

颜色色块示例

以下是Bootstrap 4主题色彩的色块示例，便于直观了解：

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

情境色彩的使用场景

表单验证

在表单验证中使用颜色提供视觉反馈：

<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" class="form-control is-valid" id="username">
  <div class="valid-feedback text-success">
    用户名可用！
  </div>
</div>

<div class=“form-group”>
<label for=“password”>密码</label>
<input type=“password” class=“form-control is-invalid” id=“password”>
<div class=“invalid-feedback text-danger”>
密码太短，至少需要8个字符。
</div>
</div>

用户名可用！
密码太短，至少需要8个字符。

警告和通知

在警告和通知组件中使用情境色彩：

<div class="alert alert-success">
  <strong>成功!</strong> 您的资料已成功更新。
</div>

<div class=“alert alert-warning”>
<strong>警告!</strong> 您的账户余额不足。
</div>


<div class=“alert alert-danger”>
<strong>错误!</strong> 无法连接到服务器。
</div>

成功! 您的资料已成功更新。
警告! 您的账户余额不足。
错误! 无法连接到服务器。

按钮色彩

不同类型的按钮使用不同的颜色表示其功能：

<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>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-dark">深色</button>
<button type="button" class="btn btn-link">链接</button>

文本背景对比度

为了确保可读性，文本和背景之间需要有足够的对比度：

<!-- 好的对比度 -->
<div class="bg-dark text-white p-3 mb-2">深色背景上的白色文本 - 对比度好</div>
<div class="bg-light text-dark p-3 mb-2">浅色背景上的深色文本 - 对比度好</div>

<!– 不佳的对比度（避免使用） –>
<div class=“bg-warning text-white p-3 mb-2”>警告色背景上的白色文本 - 对比度不足</div>
<div class=“bg-light text-warning p-3 mb-2”>浅色背景上的警告色文本 - 对比度不足</div>

深色背景上的白色文本 - 对比度好
浅色背景上的深色文本 - 对比度好
警告色背景上的白色文本 - 对比度不足
浅色背景上的警告色文本 - 对比度不足

自定义颜色

如果Bootstrap提供的颜色不符合你的品牌需求，你可以通过自定义CSS添加自己的颜色：

/* 自定义文本颜色 */
.text-brand {
  color: #9932cc !important;
}

/* 自定义背景颜色 */
.bg-brand {
background-color: #9932cc !important;
color: white;
}


/* 自定义按钮颜色 */
.btn-brand {
color: #fff;
background-color: #9932cc;
border-color: #9932cc;
}


.btn-brand:hover {
color: #fff;
background-color: #8121ad;
border-color: #7a1fa3;
}

自定义品牌颜色文本

自定义品牌颜色背景

颜色与可访问性

选择颜色时，需要考虑Web内容无障碍指南（WCAG）的要求：

可访问性提示

  1. 对比度：确保文本与背景之间的对比度至少为4.5:1（正常文本）或3:1（大文本）
  2. 不仅依赖颜色：不要仅使用颜色来传达信息，应配合图标、文本或其他视觉提示
  3. 考虑色盲用户：避免仅依赖红绿色组合来区分不同状态

响应式颜色考虑

某些颜色在不同设备上可能显示效果不同，确保你的设计在所有设备上都有足够的对比度：

<!-- 在小屏幕上使用不同颜色 -->
<div class="bg-primary d-sm-none text-white p-2 mb-2">小屏幕上显示主要颜色</div>
<div class="bg-success d-none d-sm-block text-white p-2 mb-2">大屏幕上显示成功颜色</div>
小屏幕上显示主要颜色
大屏幕上显示成功颜色

最佳实践

Bootstrap 4颜色使用的最佳实践

  1. 保持一致性：在整个应用中保持颜色的一致使用，不要为相同的功能使用不同的颜色
  2. 限制色彩数量：在一个界面中限制使用的颜色数量，通常不超过5-7种
  3. 遵循品牌指南：确保颜色符合你的品牌风格指南
  4. 考虑文化含义：不同文化中颜色可能有不同的含义，确保颜色选择适合你的目标受众
  5. 按需使用颜色：谨慎使用强烈的颜色，重点突出最重要的元素
		Bootstrap4 颜色

Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:

实例

代表指定意义的文本颜色

柔和的文本。

重要的文本。

执行成功的文本。

代表一些提示信息的文本。

警告文本。

危险操作文本。

副标题。

深灰色文字。

浅灰色文本（白色背景上看不清楚）。

白色文本（白色背景上看不清楚）。

尝试一下 »

在链接中使用

实例

文本颜色

鼠标移动到链接。

柔和的链接。 主要链接。 成功链接。 信息文本链接。 警告链接。 危险链接。 副标题链接。 深灰色链接。 浅灰色链接。

尝试一下 »

背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

实例

背景颜色

重要的背景颜色。

执行成功背景颜色。

信息提示背景颜色。

警告背景颜色

危险背景颜色。

副标题背景颜色。

深灰背景颜色。

浅灰背景颜色。

尝试一下 »