Bootstrap 辅助类

辅助类是 Bootstrap 内置的一批"即贴即用"小工具类：不改变元素结构，只负责文本对齐、大小写转换、浮动、显隐、情境颜色等细节，让你少写大量重复 CSS。下面按用途分组讲解。

文本对齐类

text-left、text-center、text-right、text-justify、text-nowrap 分别对应左对齐、居中、右对齐、两端对齐与不换行，等价于手写 text-align 与 white-space。

<p class="text-left">左对齐（默认样式）</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐：本段会拉伸字距，让左右两边都整齐。</p>
<p class="text-nowrap">不换行：即使容器很窄，本行也保持一行。</p>
<!-- 效果：五段依次为左对齐、居中、右对齐、两端对齐与单行不折行 -->

文本大小写类

text-lowercase 全小写、text-uppercase 全大写、text-capitalize 每个单词首字母大写，适合处理英文标题或品牌文案。

<p class="text-lowercase">HELLO BOOTSTRAP</p>  <!-- 显示：hello bootstrap -->
<p class="text-uppercase">hello bootstrap</p>  <!-- 显示：HELLO BOOTSTRAP -->
<p class="text-capitalize">hello world</p>      <!-- 显示：Hello World -->

浮动与居中

pull-left、pull-right 相当于 float:left 与 float:right；center-block 让块级元素水平居中；clearfix 清除浮动造成的父容器高度塌陷。

<div class="pull-left">左浮盒子</div>
<div class="pull-right">右浮盒子</div>
<div class="clearfix"></div>
<div class="center-block" style="width:200px;">水平居中的块</div>
<!-- 效果：前两个盒子分别贴左、贴右，clearfix 撑开父容器，最后一个盒子居中 -->

显示与隐藏

show 强制显示、hidden 强制隐藏（display:none）；sr-only 让内容只被屏幕阅读器读到而页面不渲染，常用于"跳到正文"这类无障碍链接。

<div class="show">看得到我</div>
<div class="hidden">这个 div 在页面中不可见</div>
<a class="sr-only" href="#content">跳到正文</a>
<!-- 效果：第二行不显示；第三个链接肉眼不可见但读屏软件可朗读 -->

情境颜色与背景

文字颜色类有 text-muted、text-primary、text-success、text-info、text-warning、text-danger，背景类 bg-primary、bg-success、bg-info、bg-warning、bg-danger 与之一一呼应。

<p class="text-muted">弱化提示</p>
<p class="text-success">成功说明</p>
<p class="text-danger">错误说明</p>
<p class="bg-warning">淡黄警告底</p>
<p class="bg-danger">淡红错误底</p>
<!-- 效果：文字依次为灰、绿、红，背景块为淡黄与淡红 -->

小结

辅助类把高频排版细节封装成一个单词，见名知意、随取随用。下一节介绍按屏幕宽度显隐内容的响应式实用工具。