Bootstrap 辅助类和响应式工具（四）

一、辅助类

<div class="container">
<p class="text-muted">Bootstrap练习系统学习,没有bg-muted 类别</p>
<p class="bg-success text-success">Bootstrap练习系统学习</p>
<p class="bg-danger text-danger">Bootstrap练习系统学习</p>
<p class="bg-primary text-primary">Bootstrap练习系统学习</p>
<p class="bg-info text-info">Bootstrap练习系统学习</p>
<p class="bg-warning text-warning">Bootstrap练习系统学习</p>
</div>

<!-- 关闭按钮 -->
<button class="close">×</button>

<!-- 三角符号 -->
<span class="caret"></span>

<!-- 快速浮动 -->
<div class="pull-left a">左边</div>
<div class="pull-right a">右边</div>

<!-- 块级居中 -->
<div class="center-block a">块级居中</div>

<!-- 清理浮动 -->
<div class="pull-left a">左边</div>
<div class="clearfix"></div>
<div class="a">右边</div>

<!-- 显示隐藏 -->
<div class="show">show</div>
<div class="hidden">hidden</div>

.text-muted // 情景文本，柔和灰

.text-primary // 情景文本，主要蓝

.text-success // 情景文本，成功绿

.text-info // 情景文本，信息蓝

.text-warning // 情景文本，警告黄

.text-danger // 情景文本，危险红

情景背景色没有此类 bg-muted

.bg-primary // 情景背景色，主要蓝

.bg-success // 情景背景色，成功绿

.bg-info // 情景背景色，信息蓝

.bg-warning // 情景背景色，警告黄

.bg-danger // 情景背景色，危险红

.close // 关闭按钮 ×

.caret // 三角符号

.pull-left // 向左浮动，有最高优先级

.pull-right // 向右浮动，有最高优先级

.center-block // 块级居中，与 margin：x auto； 的用法相同

.clearfix// 清除浮动

.show // 显示，加强优先级

.hidden // 隐藏，加强优先级

二、响应式工具

媒体查询，针对不同的屏幕大小，需要显示和隐藏的部分内容，通过一下类别解决。

<div class="visible-xs-* a">Bootstarp</div> // 只有在超小屏幕下可见
<div class="hidden-xs a">Bootstarp</div>  // 超小屏幕便隐藏掉看不到

对于 visible 显示的内容 * 部分有三个值可选： block， inline-block 、inline；