改变文本颜色

Bootstrap 提供了一系列的类来改变文本颜色、背景颜色以及进行布局和功能性操作。以下是这些类的使用示例和代码：

文本颜色

这些类可以应用于任何文本元素，如 <p>、<span>、<a> 等。

<!-- 淡色文本 -->
<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>

背景颜色

这些类通常应用于 <div> 或其他容器元素。

<!-- 主题色背景 -->
<div class="bg-primary">主题色背景</div>

<!-- 成功色背景 -->
<div class="bg-success">成功色背景</div>

<!-- 信息色背景 -->
<div class="bg-info">信息色背景</div>

<!-- 警告色背景 -->
<div class="bg-warning">警告色背景</div>

<!-- 危险色背景 -->
<div class="bg-danger">危险色背景</div>

布局和功能性类

这些类提供了额外的布局控制和功能。

<!-- 元素左浮动 -->
<div class="pull-left">左浮动元素</div>

<!-- 元素右浮动 -->
<div class="pull-right">右浮动元素</div>

<!-- 元素居中显示 -->
<div class="center-block">居中显示元素</div>

<!-- 清除浮动 -->
<div class="clearfix"></div>

<!-- 强制显示元素 -->
<div class="show">显示元素</div>

<!-- 强制隐藏元素 -->
<div class="hidden">隐藏元素</div>

<!-- 仅屏幕阅读器可见 -->
<a class="sr-only" href="#content">跳转到内容</a>

<!-- 屏幕阅读器可见，并且在获得焦点时显示 -->
<a class="sr-only-focusable" href="#content">跳转到内容</a>

<!-- 文本隐藏 -->
<div class="text-hide">我是被隐藏的文本</div>

<!-- 关闭按钮 -->
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>