颜色与背景

设置背景颜色并搭配对比的前景颜色。

本页目录

概览

颜色和背景辅助类结合了我们的力量 .text-* 工具类和 .bg-* 工具类在一个类中。使用我们的 Sass color-contrast() 函数，我们会自动确定一个对比 color 对于特定的 background-color.

注意！ 当前不支持 CSS 原生的 color-contrast 函数，因此我们通过 Sass 使用自己的实现。这意味着通过 CSS 变量自定义我们的主题颜色可能会导致这些工具的颜色对比问题。

主色与对比色

次要色带有对比色

与对比色的成功

与对比颜色相关的危险

带有对比色的警告

对比色信息

与颜色形成对比的光

深色与对比色

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-* 类，例如在徽章上：

主要的信息

HTML

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

或者在卡片上：

标题

一些快速的示例文本，用于扩展卡片标题并构成卡片内容的大部分。

标题

一些快速的示例文本，用于扩展卡片标题并构成卡片内容的大部分。

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>