设置具有对比前景色的背景色。
概述
颜色和背景辅助工具将我们的 .text-* 实用程序和 .bg-* 实用程序的强大功能组合在一个类中。使用我们的 Sass 函数，我们自动确定特定 .color-contrast()colorbackground-color
小心！目前不支持 CSS 原生函数，因此我们通过 Sass 使用自己的函数。这意味着通过 CSS 变量自定义我们的主题颜色可能会导致这些实用程序出现颜色对比度问题。color-contrast
原色与对比色
具有对比色的次要
对比色的成功
对比色的危险
对比色警告
带有对比色的信息
具有对比色的光
深色与对比色
<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-*
主要
信息
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>或在卡片上：
页眉
一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。
页眉
一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。
<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>