Bootstrap 辅助样式

Bootstrap在布局方面还提供了一些细小的辅助样式，用于文字颜色及背景色设置、显示关闭图标、向左浮动、向右浮动、清除浮动、隐藏、显示等功能。

一、文本样式与背景样式

Bootstrap提供了6种统一的样式颜色，分别是：柔和灰（text-muted）、主要蓝（text-primary）、成功绿（text-success）、信息蓝（text-info）、警告黄（text-warning）、危险红（text-danger）。

Bootstrap还提供了5种背景颜色和上面的5种文本颜色样式对应（muted样式除外），分别是：主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄（bg-warning）、危险红（bg-danger）

示例代码：

<p class="text-primary bg-info">Bootstrap</p>

效果：

二、辅助图标

	1、关闭图标，其有两种使用方式：（默认在一行的最右侧）

<button type="button" class="close">&times;</button>
<a class="close">&times;</a>

	2、向下箭头，在下拉菜单中经常看到表示向下效果的小箭头，Bootstrap专门为此提供了一个caret样式，其使用方式非常简单，直接在相应的span（或其他元素）上应用该样式即可。向下箭头的实现原理是在行内块级元素上，通过定义border-top、border-left、border-right来实现。具体源码如下：

.caret { /*向下箭头*/
display: inline-block;
width: 0; height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
三、内容浮动

	对于左右浮动，分别用pull-left和pull-right样式，居中则用center-block样式，清除浮动，则用clearfix样式，CSS源码：

.pull-right { float: right !important; /*向右浮动*/ }
.pull-left { float: left !important; /*向左浮动*/}
.center-block {
display: block; /*将页面元素设置为块级元素*/
margin-right: auto; /*左右居中显示*/
margin-left: auto;
}
.clearfix:before,
.clearfix:after { display: table; content: ” ”;}
.clearfix:after { clear: both;}

四、显示与隐藏

	可以设置元素或文本内容的显示或隐藏状态，使用show、hidden、invisible样式即可：

.show { display: block !important; /*显示内容*/}
.invisible { visibility: hidden; /*隐藏可视性*/}
.hidden {
display: none !important; /*隐藏内容*/
visibility: hidden !important; /*隐藏可视性*/
}
	另外，可以使用text-hide样式，让一个元素的文本内容不显示，而只显示背景效果，CSS源码如下：

.text-hide {
font: 0/0 a; /* 等价于 font-size: 0px;line-height: 0;font-family: a;*/
color: transparent;
text-shadow: none;
background-color: transparent;/*将页面元素所包含的文本内容替换为透明色,以显
示背景图片*/
border: 0;
}
五、响应式样式

	响应式设计可以适应不同尺寸的设备，它会根据不同尺寸的设备对特定的元素进行显示和隐藏设置，同时响应式设计也可以区别打印模式和普通浏览模式。如下图：