1.小图标

1.1小图标的用法：

<span class="glyphicon glyphicon-user"></span>；

所有的小图标都是以glyphicon-开头的。

1.2小图标使用的注意事项：

1）图标类不能和其他组件直接联合使用，它们不能在同一个元素上与其他类同时存在，应该创建一个嵌套的span元素，并将图标应用到这个span上。
2）只对元素内容为空的元素起作用。（span里面不能有文字等东西）
3）对引入图标位置有规定，假如所有图标字体全部位于../fonts/目录内，相对于预编译版CSS文件的应该是同级目录才有效果。

2.下拉菜单

2.1基本下拉菜单用法：

<div class="dropup open">  <!-- open控制菜单收缩展开--><button class="btn btn-primary " data-toggle="dropdown" >Dropup<span class="caret"></span>    <!-- 向下小三角--></button><ul class="dropdown-menu"><li class="active"><a href="#">Action</a></li> <!-- active 默认是选中状态--><li><a href="#">Another action</a></li><li class="divider"></li>     <!-- 分界线--><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul>
</div>

效果图：

分离式下拉菜单：

<div class="container"><div class="btn-group"><button type="button" class="btn btn-danger">Action</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div>
</div>

效果图：

3.输入框

3.1输入框的用法：

<div class="container"><div class="input-group input-group-lg"><span class="input-group-addon">用户名</span><input type="text" class="form-control" placeholder="Username"></div><br/><!--右边input-group-sm表示小输入框input-group-lg表示大输入框-->    <div class="input-group input-group-sm"><input type="text" class="form-control" placeholder="请输入要搜索的内容" ><span class="input-group-addon" >百度一下</span></div>
</div>

效果图：

3.2使用输入框组件的注意事项：

1）避免在select元素上使用该功能，因为Webkit浏览器不完全支持input-group组件的特性。
2）不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件。
3）不要讲表单组件或栅格列类直接和输入框混合使用，而是将输入框组件嵌套到表单组件或栅格相关元素的内部。

4.4.导航和导航条

4.1选项卡导航和胶囊式选项卡导航：

    <!--选项卡式导航--><ul class="nav nav-tabs nav-justified"><li  class="active"><a href="#">主页</a></li><li><a href="#">微博</a></li> <li><a href="#">图书</a></li><li><a href="#">关于我们</a></li></ul><br/><br/><!--胶囊式选项卡导航--><ul class="nav nav-pills nav-justified "><li><a href="#">主页</a></li><li  class="active"><a href="#">微博</a></li><li><a href="#">图书</a></li><li><a href="#">关于我们</a></li>
</ul>

效果图：

4.2导航条：

<div class="container" style="margin: 20px"><!--基础导航条--><nav class="navbar navbar-default" role="navigation" style="padding-right: 20px"><div class="navbar-header"><a href="#" class="navbar-brand">LOGO</a></div><ul class="nav navbar-nav "><li  class="active"><a href="#">主页</a></li><li><a href="#">微博</a></li><li><a href="#">图书</a></li></ul><!--在导航条中添加表单--><form class="navbar-form navbar-right" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-primary">搜索</button></form></nav>
</div>

效果图：

4.3将导航条固定在顶部或固定在底部：

固定在顶部：

<nav class="navbar navbar-inverse navbar-fixed-top">...</nav>

固定在底部：

<nav class="navbar navbar-inverse navbar-fixed-bottom">...</nav>

5.媒体对象

<div class="media"><div class="media-left"><img class="media-object" src="image/pic-samll.jpg" alt=""></div><div class="media-body"><h4 class="media-heading">谁在制造下跌，散户何去何从</h4><p>大盘分时不断在筑底过程中下跌，每一次有W底之意得形态上，最终迎来的都是坡位下行。虽然周末央企改革事宜进行了公布，单这种利好只在开盘的第一个动作中有所体现。</p><small>5分钟前/ 股市</small><small style="margin-left:70%;color: #f0ad4e"> 评论 | 分享 </small></div>
</div>
<hr/>
<div class="media"><div class="media-body text-right"><h4 class="media-heading">在制造下跌，散户何去何从</h4><p class="pull-right">大盘分时不断在筑底过程中下跌，每一次有W底之意得形态上，最终迎来的都是坡位下行。虽然周末央企改革事宜进行了公布，单这种利好只在开盘的第一个动作中有所体现</p><small>5分钟前/ 股市</small><small style="margin-left:70%;color: #f0ad4e"> 评论 | 分享 </small></div><div class="media-right"><img class="media-object" src="image/pic-samll.jpg" alt=""></div>
</div>

效果图：

6.列表组

<ul class="list-group"><li class="list-group-item active ">同桌的你<!--徽章图标--><span class="badge">12</span></li><!--list-group-item-success 带有样式的列表--><li class="list-group-item list-group-item-success">花样年华<span class="badge">5</span></li><li class="list-group-item">甜蜜蜜<span class="badge">8</span></li><li class="list-group-item">向天再借五百年</li>
</ul>

效果图：

7.分页导航

 <!--pagination 分页 原理：1、设置li元素的内敛显示和边框属性。2、设置第一个和最后一个圆角--><ul class="pagination"><!--&lt;!&ndash;disabled 禁用状态&ndash;&gt;--><li class="disabled"><a href="#">&laquo;</a></li><!--&lt;!&ndash;active当前页&ndash;&gt;--><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li></ul><!--pager翻页效果，实现步骤：1、整体居中 2、li有圆角 3、设置鼠标移动上去的效果 4、支持a元素的span元素--><ul class="pager"><li><a href="#">上一页</a></li><li><a href="#">下一页</a></li></ul><!--pager翻页效果 --><ul class="pager"><li class="previous disabled"><a href="#">上一页</a></li><li class="next"><a href="#">下一页</a></li>
</ul>

效果图：

8.缩略图

<div class="container"><div class="row"><div class="  col-md-3 col-xs-6"><div class="thumbnail text-center"><img src="image/img1.jpg" alt=""><div class="caption"><h3>左耳</h3><p>放肆青春掀全民追忆</p><p><a href="#" class="btn btn-primary" role="button">播放</a><a href="#" class="btn btn-default" role="button">下载</a></p></div></div></div> </div>
</div>

效果图：