Bootstrap 4 提供了丰富的颜色类，帮助你轻松设置页面元素的背景色、文本色、边框色等。以下是 Bootstrap 4 中常用的颜色类和它们的使用方式。

1. 文本颜色（Text Color）

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">This text is primary (blue).</p>
<p class="text-success">This text indicates success (green).</p>
<p class="text-danger">This text represents danger (red).</p>
<p class="text-muted">This text is muted (light gray).</p>
<p class="text-white bg-dark">This text is white on a dark background.</p>

2. 背景颜色（Background Color）

背景颜色类用于快速设置元素的背景色。

常见背景颜色类：

  • 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 p-3">Primary background with white text</div>
<div class="bg-success text-white p-3">Success background with white text</div>
<div class="bg-danger text-white p-3">Danger background with white text</div>
<div class="bg-light text-dark p-3">Light background with dark text</div>

3. 边框颜色（Border Color）

Bootstrap 4 还提供了边框颜色类，用于为元素添加边框颜色。

常见边框颜色类：

  • border-primary：主要颜色边框
  • border-secondary：次要颜色边框
  • border-success：成功颜色边框
  • border-danger：危险颜色边框
  • border-warning：警告颜色边框
  • border-info：信息颜色边框
  • border-light：浅色边框
  • border-dark：深色边框
  • border-white：白色边框
  • border-0：去除边框

示例：

<div class="border border-primary p-3">This box has a primary border color.</div>
<div class="border border-success p-3">This box has a success border color.</div>
<div class="border border-danger p-3">This box has a danger border color.</div>
<div class="border-0 p-3">This box has no border.</div>

4. 渐变背景（Gradient Backgrounds）

Bootstrap 4 并没有内置的渐变颜色类，但你可以通过自定义 CSS 实现渐变背景。以下是一个基本的渐变背景示例：

示例：

<div class="p-3" style="background: linear-gradient(to right, #ff7e5f, #feb47b);">
  This div has a gradient background.
</div>

5. 文本高亮（Text Highlighting）

使用 mark 标签可以让文本高亮显示，通常用于突出显示某些内容。

示例：

<p>This is a <mark>highlighted</mark> text.</p>

6. 自定义颜色

虽然 Bootstrap 提供了许多预设的颜色类，但你也可以自定义颜色类。你可以通过修改 Bootstrap 的源代码，或使用 SASS 变量 来自定义颜色。

自定义颜色的方式：

  1. 在自定义的 CSS 文件中，覆盖现有的颜色类：
.text-custom {
  color: #ff6347; /* Tomato color */
}

.bg-custom {
  background-color: #ff6347;
}
  1. 在 HTML 中使用：
<p class="text-custom">This text has a custom color.</p>
<div class="bg-custom text-white p-3">This box has a custom background color.</div>

7. 透明颜色

Bootstrap 4 的颜色类还支持透明度设置。例如，bg-transparent 用于设置透明背景，text-transparent 用于设置透明文字。

示例：

<div class="bg-transparent p-3">This box has a transparent background.</div>
<p class="text-transparent">This text is transparent.</p>

8. 响应式颜色类

Bootstrap 4 中的颜色类默认适用于所有屏幕尺寸。如果你需要根据不同屏幕尺寸应用不同的颜色，可以使用响应式类。

示例：

<div class="bg-primary text-white p-3 d-none d-sm-block">Visible on small screens and above</div>
<div class="bg-success text-white p-3 d-block d-sm-none">Visible on extra small screens only</div>

总结

Bootstrap 4 提供了许多方便的颜色类，让你能快速设置元素的颜色。通过这些类，你可以轻松控制文本颜色、背景颜色、边框颜色等。对于更复杂的颜色需求，Bootstrap 4 允许你自定义颜色或使用 CSS 渐变、透明色等效果。你也可以通过响应式类根据不同屏幕尺寸调整颜色。

如果你有更多问题，或者需要更具体的示例，随时告诉我！