Color and background

将背景颜色设置为对比前景色。

On this page

概述

颜色和背景助手将我们的.text-* 工具集和.bg-* 工具集的功能组合在一个类中。使用我们的Sass color-contrast() 函数，我们自动为特定的 background-color 确定对比度 color 。

Heads up! 目前还不支持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>