添加于 v5.2 在GitHub查看

颜色和背景

设置与前景色形成对比的背景色。

在此页

概述

颜色和背景助手将我们的.text-*实用程序和.bg-*实用程序的功能结合在一个类中。使用我们的 Sasscolor-contrast()函数，我们自动确定color特定background-color.

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

对比色为主

二次对比色

对比色的成功

对比色的危险

对比色警告

对比色信息

具有对比色的光

深色对比色

网页格式

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

带组件

使用它们代替组合.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>