Bootstrap辅助类

Bootstrap 提供了一系列辅助类，这些类可以帮助你快速添加样式和布局，而无需编写额外的CSS代码。以下是一些常用的Bootstrap辅助类的详细说明和使用示例。

文本类

这些类可以改变文本的颜色。

• .text-muted：灰色，用于不太重要的文本。
• .text-primary：主题色，通常用于主要的文本。
• .text-success：绿色，用于表示成功或积极的消息。
• .text-info：蓝色，用于信息性消息。
• .text-warning：橙色，用于警告或需要注意的消息。
• .text-danger：红色，用于表示危险或错误的消息。

代码示例：

<p class="text-muted">这是一条灰色的文本。</p>
<p class="text-primary">这是一条主题色的文本。</p>
<p class="text-success">这是一条绿色的文本。</p>
<p class="text-info">这是一条蓝色的文本。</p>
<p class="text-warning">这是一条橙色的文本。</p>
<p class="text-danger">这是一条红色的文本。</p>

背景类

这些类可以改变背景颜色。

• .bg-primary：主题色的背景。
• .bg-success：绿色的背景。
• .bg-info：蓝色的背景。
• .bg-warning：橙色的背景。
• .bg-danger：红色的背景。

代码示例：

<div class="bg-primary p-3">这是一块主题色的背景区域。</div>
<div class="bg-success p-3">这是一块绿色的背景区域。</div>
<div class="bg-info p-3">这是一块蓝色的背景区域。</div>
<div class="bg-warning p-3">这是一块橙色的背景区域。</div>
<div class="bg-danger p-3">这是一块红色的背景区域。</div>

其他辅助类

• .pull-left：使元素向左浮动。
• .pull-right：使元素向右浮动。
• .center-block：使元素居中显示，需要设置元素的 display 为 block。
• .clearfix：清除浮动，用于父元素中。
• .show：使元素可见。
• .hidden：使元素隐藏。
• .sr-only：屏幕阅读器可见，但对其他设备隐藏。
• .sr-only-focusable：与 .sr-only 结合使用，当元素获得焦点时可见。
• .text-hide：用于隐藏文本，通常用于图像替换。
• .close：用于创建关闭按钮，通常与模态框一起使用。
• .caret：创建一个下拉箭头，通常用于下拉菜单。

代码示例：

<div class="pull-left">向左浮动的元素。</div>
<div class="pull-right">向右浮动的元素。</div>
<div class="center-block w-50">居中显示的元素。</div>
<div class="clearfix"></div>
<div class="show">这个元素是可见的。</div>
<div class="hidden">这个元素是隐藏的。</div>
<a href="#" class="sr-only">屏幕阅读器链接</a>
<a href="#" class="sr-only-focusable">焦点时可见的链接</a>
<div class="text-hide">这是一个使用背景图的文本。</div>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<span class="caret"></span>