Bootstrap颜色

Bootstrap提供了一些颜色（Colors）通用类别，使颜色的表达更加有意义。这些类别包括按钮、链接、背景等元素的颜色，以及支持hover状态的样式连接。使用这些颜色类别可以快速地为网站添加一致和吸引人的色彩方案。

一、颜色

使用color通用类别为文字上色。如果要为连接上色，你可以使用助手中的彩色链接。它们具有：hover and：focus的状态。

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

上下文文本类在具有提供的悬停和焦点状态的锚点上也很好用。请注意，.text-white 和 .text-muted 类除了下划线之外没有其他链接样式。

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

二、处理特殊性

有时候情境色彩并无法套用在其他的提取器，解决方案是用一个div包装元素内容，并将class套用在上面。

三、背景颜色

与上下文文本颜色类类似，将元素的背景设置为任何上下文类。背景实用程序不设置颜色，因此在某些情况下需要使用.text-*颜色实用程序。

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

四、背景渐变

通过添加一个.bg-gradient梯度类，将一个线性梯度作为背景图像添加到背景中。这个渐变从一个半透明的白色开始，逐渐消失到底部。自定义CSS渐变只需添加背景图像background-image: var(--bs-gradient)。