## 辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。 ### 情景背景色 |样式|描述| |---|---| |text-muted |柔和灰| |text-primary|主要蓝| |text-success|成功绿| |text-info| 信息蓝| |text-warning|警告黄| |text-danger|危险红| 各种色调的背景 ~~~html <p class="text-muted">BOOTSTRAP</p> <p class="text-primary">BOOTSTRAP</p> <p class="text-warning">BOOTSTRAP</p> <p class="text-danger">BOOTSTRAP</p> <p class="text-success">BOOTSTRAP</p> <p class="text-info">BOOTSTRAP</p> ~~~ ### 关闭按钮 ~~~html <button type="button" class="close">&times;</button> ~~~ ### 三角符号 ~~~html <span class="caret"></span> ~~~ ### 快速浮动 > 注：这个浮动其实就是 float，只不过使用了!important 加强了优先级。 ~~~html <div class="pull-left a">aaaa</div> ~~~ ### 块级居中 ~~~html <div class="center-block">居中</div> ~~~ ### 清理浮动 ~~~html <div style="border: 1px solid red;"> <div class="pull-left a">aaaa</div> <div class="clearfix"></div> </div> ~~~ ### 显示和隐藏 ~~~html <div class="show">show</div> <div class="hidden">hidden</div> ~~~ ## 响应式工具 在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。   **超小屏幕激活显示** ~~~html <div class="visible-xs-block a">aaa</div> ~~~ **超小屏幕激活隐藏** ~~~html <div class="hidden-xs a">bbb</div> ~~~ > 注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。