Bootstrap组件（小图标、下拉菜单、输入框、导航和导航条、媒体对象、列表组、分页导航、缩略图）

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>

效果图：