Bootstrap4 颜色学习笔记

前言

Bootstrap 是一种流行的前端开发框架，它提供了一组强大的工具来创建现代化、响应式的网站和应用程序。其中一项重要的功能就是颜色系统，可以通过预先定义的颜色变量快速设置和管理元素的颜色。

颜色变量

Bootstrap4 中有许多预先定义的颜色变量，包括：

1. $primary: 主色调，通常为蓝色。
2. $secondary: 次要的颜色，通常为灰色。
3. $success: 成功状态的颜色，通常为绿色。
4. $danger: 危险状态的颜色，通常为红色。
5. $warning: 警告状态的颜色，通常为黄色。
6. $info: 信息状态的颜色，通常为天蓝色。
7. $light: 浅色背景的颜色，通常为白色。
8. $dark: 深色背景的颜色，通常为黑色。

这些变量可以在任何元素上使用，例如文本、按钮、表单字段等。

以下是一个例子：

htmlCopy Code
<div class="text-primary">这是一个蓝色文本</div>
<button class="btn btn-success">成功按钮</button>
<input type="text" class="form-control rounded-pill bg-warning text-white" placeholder="输入文本">

在这个例子中，我们使用 text-primary 类将文本的颜色设置为 $primary 变量定义的蓝色。按钮和输入框也使用了类似的方法来设置其颜色。

强调颜色

Bootstrap4 还提供了一些用于强调元素的类。例如：

1. .bg-primary: 背景颜色为主色调。
2. .text-danger: 文本颜色为危险状态的颜色。
3. .border-warning: 边框颜色为警告状态的颜色。

以下是一个例子：

htmlCopy Code
<div class="bg-primary text-white">这是一个主色调背景的白色文本</div>
<p class="lead text-danger">这是一段红色强调文本</p>
<div class="card border-warning">这是一个警告状态边框的卡片</div>

自定义颜色

如果上述预定义颜色不能满足您的需求，您可以自定义自己的颜色。Bootstrap4 使用 Sass 变量来定义颜色，因此您只需要定义一个新的 Sass 变量，然后使用它来设置元素的颜色即可。例如：

Copy Code
$custom-color: #ffa500; // 自定义颜色为橙色

.btn-custom {
  background-color: $custom-color;
  border-color: $custom-color;
}

在这个例子中，我们定义了一个名为 $custom-color 的 Sass 变量，并将其设置为橙色。然后，我们创建了一个名为 btn-custom 的类，并使用 $custom-color 变量来设置其背景和边框颜色。

结论

在 Bootstrap4 中，颜色系统为开发人员提供了一种简便的方法来管理和使用颜色。通过使用预定义的颜色变量和强调类，您可以轻松地设置元素的颜色，或者使用自定义 Sass 变量来创建自己的主题颜色。