1、text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442)

2、文本对齐风格：.text-left：左对齐 .text-center：居中对齐  .text-right：右对齐 .text-justify：两端对齐（用于段落）。

3、定义列表：      

<dl>    <dt>…</dt>    <dd>…</dd></dl>

4、

无序列表ul 加 .list-unstyled 去点。  内联样式：.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}

.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}　　　　

5、pre<pre>元素一般用于显示大块的代码，并保证原有格式不变。

.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

.pre-scrollable {max-height: 340px;overflow-y: scroll;}

6、表单控件(文本域textarea)  <textarea class="form-control" rows="3"> </textarea>   

7、在Bootstrap框架中同样提供这几种效果。1、.has-warning:警告状态（黄色）2、.has-error：错误状态（红色）3、.has-success：成功状态（绿色）使用的时候只需要在form-group容器上对应添加状态类名。

8、图像 1、img-responsive：响应式图片，主要针对于响应式设计2、img-rounded：圆角图片3、img-circle：圆形图片4、img-thumbnail：缩略图片

9、按钮下拉菜单基本用法：

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">   <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">下拉菜单项</a></li>   …   <li role="presentation" class="divider"></li>   <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">下拉菜单项</a></li></ul></div>
下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
10、导航:水平导航 .nav-tabs   胶囊导航.nav-pills 垂直导航：nav-stacked  自适应导航  nav nav-tabs nav-justified
11、导航条（navbar）第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”
12、分页导航

<ul class="pagination">   <li><a href="http://www.mamicode.com/#">&laquo;</a></li>   <li><a href="http://www.mamicode.com/#">1</a></li>   <li><a href="http://www.mamicode.com/#">2</a></li>   <li><a href="http://www.mamicode.com/#">3</a></li>   <li><a href="http://www.mamicode.com/#">4</a></li>   <li><a href="http://www.mamicode.com/#">5</a></li>   <li><a href="http://www.mamicode.com/#">&raquo;</a></li></ul>
翻页分页导航

<ul class="pager">   <li><a href="http://www.mamicode.com/#">&laquo;上一页</a></li>   <li><a href="http://www.mamicode.com/#">下一页&raquo;</a></li></ul>

12.进度条：

<h2>基本进度条</h2>
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>

<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

<h5>层叠条纹进度条</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

媒体对象

<ul class="media-list">    <li class="media">        <a class="pull-left" href="http://www.mamicode.com/#">            <img class="media-object" src="http://www.mamicode.com/" alt="...">        </a>        <div class="media-body">            <h4 class="media-heading">Media Header</h4>            <div>…</div>        </div>    </li>    <li class="media">…</li>    <li class="media">…</li></ul>

bootsrtap (-)