颜色是用户界面设计的关键元素。Bootstrap 4 提供了一套完整的颜色系统，包括语义颜色、背景颜色、文本颜色和边框颜色等，帮助您创建视觉一致且美观的界面。
Bootstrap 4 提供了一套精心设计的主题颜色，这些颜色在整个框架中保持一致，可用于各种组件和元素。
Bootstrap 4 提供了一系列文本颜色类，用于设置文本的颜色。
.text-primary - 主要文本
.text-secondary - 次要文本
.text-success - 成功文本
.text-danger - 危险文本
.text-warning - 警告文本
.text-info - 信息文本
.text-light - 浅色文本
.text-dark - 深色文本
.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>
<p class="text-light bg-dark">.text-light - 浅色文本</p>
<p class="text-dark">.text-dark - 深色文本</p>
<p class="text-muted">.text-muted - 减弱文本</p>
<p class="text-white bg-dark">.text-white - 白色文本</p>
Bootstrap 4 提供了一系列背景颜色类，用于设置元素的背景颜色。
<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-white">.bg-info - 信息背景</div>
<div class="bg-light text-dark">.bg-light - 浅色背景</div>
<div class="bg-dark text-white">.bg-dark - 深色背景</div>
<div class="bg-white text-dark">.bg-white - 白色背景</div>
<div class="bg-transparent text-dark">.bg-transparent - 透明背景</div>
Bootstrap 4 提供了渐变背景类，可以创建漂亮的渐变效果。
<div class="bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="bg-gradient-success text-white">.bg-gradient-success</div>
<div class="bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="bg-gradient-info text-white">.bg-gradient-info</div>
<div class="bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="bg-gradient-dark text-white">.bg-gradient-dark</div>
Bootstrap 4 提供了边框颜色类，用于设置元素的边框颜色。
<div class="border border-primary">.border-primary</div>
<div class="border border-secondary">.border-secondary</div>
<div class="border border-success">.border-success</div>
<div class="border border-danger">.border-danger</div>
<div class="border border-warning">.border-warning</div>
<div class="border border-info">.border-info</div>
<div class="border border-light">.border-light</div>
<div class="border border-dark">.border-dark</div>
<div class="border border-white">.border-white</div>
Bootstrap 4 提供了一些实用的颜色工具类，用于处理颜色的各种效果。
.text-reset - 重置文本颜色为继承值
.text-decoration-none - 移除文本装饰（如下划线）
以下是一些在实际项目中如何使用 Bootstrap 4 颜色类的示例。
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<div class="alert alert-primary" role="alert">
这是一个主要警告框 - .alert-primary
</div>
<div class="alert alert-secondary" role="alert">
这是一个次要警告框 - .alert-secondary
</div>
<div class="alert alert-success" role="alert">
这是一个成功警告框 - .alert-success
</div>
<div class="alert alert-danger" role="alert">
这是一个危险警告框 - .alert-danger
</div>
<div class="alert alert-warning" role="alert">
这是一个警告警告框 - .alert-warning
</div>
<div class="alert alert-info" role="alert">
这是一个信息警告框 - .alert-info
</div>
<div class="alert alert-light" role="alert">
这是一个浅色警告框 - .alert-light
</div>
<div class="alert alert-dark" role="alert">
这是一个深色警告框 - .alert-dark
</div>
Bootstrap 4 允许您通过 Sass 变量轻松自定义颜色主题。
要自定义 Bootstrap 4 的颜色，您可以修改 Sass 变量：
// 自定义主要颜色
$primary: #6f42c1;
$secondary: #e83e8c;
$success: #20c997;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;
// 引入 Bootstrap
@import "bootstrap/scss/bootstrap";
通过修改这些变量，您可以轻松创建符合您品牌色彩的主题。
恭喜！您已经学习了Bootstrap 4颜色系统的核心概念和功能。颜色是创建美观、一致用户界面的关键元素，掌握这些技巧将帮助您设计出更专业的网站和应用。
继续学习下一章：Bootstrap 4 表格