颜色和背景

设置具有对比前景色的背景色。

更新于: 2023-04-30 14:28:22 查看: 353

发布于: 2022-6-27 16:13 发布者: 大米

概述
将 .text-* 和 .bg-* utilities结合在一个类中。来设置具有对比前景色的背景色，自动 确定color特定background-color。
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
<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-*类，例如在徽章上：
Primary Info
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>
或在卡片上：
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. 

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

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请