1、文本颜色类：
2、背景颜色类：
以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：
| 类 | 描述 | |
|---|---|---|
| .bg-primary | 表格单元格使用了 "bg-primary" 类 | |
| .bg-success | 表格单元格使用了 "bg-success" 类 | |
| .bg-info | 表格单元格使用了 "bg-info" 类 | |
| .bg-warning | 表格单元格使用了 "bg-warning" 类 | |
| .bg-danger | 表格单元格使用了 "bg-danger" 类 |
3、三角符号：<span class="caret"></span>（显示下拉式功能）
4、快速浮动类：
| .pull-left | 元素浮动到左边 | |
| .pull-right | 元素浮动到右边 |
| .clearfix | 清除浮动 |
5、让内容块网页居中：
| .center-block | 设置元素为 display:block 并居中显示 |
6、其他
| .show | 强制元素显示 | |
| .hidden | 强制元素隐藏 | |
| .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素 | |
| .sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) | |
| .text-hide | 将页面元素所包含的文本内容替换为背景图 | |
| .close | 显示关闭按钮 |
<body style="padding:50px;background-color:#ccc;">
<h2 class="page-header">浮动和清除的应用</h2>
<div style="350px;" class="clearfix center-block bg-warning img-responsive" >
<div class="">
<ul class="list-unstyled ">
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="2.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="3.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="4.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="5.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
</ul>
</div>
</div>
<h2 class="page-header">图片样式应用</h2>
<div>
<img class="img-responsive img-circle center-block" width="400px" src="1.jpg">
<p>
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
</p>
</div>
</body>
