Added in v5.2 View on GitHub

颜色和背景色（Color & background）

设置背景色和对比鲜明的前景色。

On this page

概览

颜色和背景辅助工具将 .text-* 工具和 .bg-*工具的强大功能集于一身。使用 Sass 的 color-contrast() 函数，我们可以自动为特定的 background-color 确定对比色。

注意！ 目前还不支持 CSS 本地的 color-contrast 函数，因此我们通过 Sass 使用自己的函数。这意味着，通过 CSS 变量自定义主题颜色可能会导致这些实用程序出现颜色对比度问题。

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

可用性提示： 使用颜色来增加含义，只能提供视觉指示，无法传达给屏幕阅读器等辅助技术的用户。请确保从内容本身（例如，具有足够色彩对比度的可见文本）或通过其他方式（例如使用.visually-hidden类隐藏的附加文本）明显看出含义。

附加组件

使用它们代替组合的 .text-* 和 .bg-* 类，如 badges:

Primary Info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

或者 cards:

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>