文本颜色

<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>

不透明度

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。

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

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

<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>