颜色
文本颜色

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-indigo

.text-purple

.text-pink

.text-yellow

.text-cyan

.text-brown

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<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-indigo">.text-indigo</p>
<p class="text-purple">.text-purple</p>
<p class="text-pink">.text-pink</p>
<p class="text-yellow">.text-yellow</p>
<p class="text-cyan">.text-cyan</p>
<p class="text-brown">.text-brown</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
注意：.text-black-50 和 .text-white-50 从v5开始就不推荐使用。它们将在v6中删除。
不透明度

v5.1.0版本中，文本颜色类是使用CSS变量通过Sass生成的。这允许实时更改颜色，而无需编译和动态alpha透明度更改。

它是如何工作的

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

我们使用了一个RGB版本的 --bs-primary（值为13, 110,253）CSS变量，并附加了第二个CSS变量 --bs-text-opacity，作为alpha透明度（由于本地CSS变量，默认值为1）。这意味着你可以随时使用 .text-primary，计算的颜色值是rgba(13,110,253,1)。每个内部的本地CSS变量。text-* 类避免了继承问题，因此实用程序的嵌套实例不会自动具有修改的alpha透明性。

要更改不透明度，请通过自定义样式或内联样式覆盖 --bs-text-opacity。

这是默认的主颜色文本
这是50%不透明的主颜色文本
<div class="text-primary">这是默认的主颜色文本</div>
<div class="text-primary" style="--bs-text-opacity: .5;">这是50%不透明的主颜色文本</div>

或者，从任何一个选项中选择 .text-opacity 相关类：

这是默认的主颜色文本
这是75%不透明的主颜色文本
这是50%不透明的主颜色文本
这是25%不透明的主颜色文本
<div class="text-primary">这是默认的主颜色文本</div>
<div class="text-primary text-opacity-75">这是75%不透明的主颜色文本</div>
<div class="text-primary text-opacity-50">这是50%不透明的主颜色文本</div>
<div class="text-primary text-opacity-25">这是25%不透明的主颜色文本</div>