本节知识点

• 面包屑导航
• 分页
• 标签
• 徽章

(一) 面包屑导航

• 类似列表页上面的导航 breadcrumb

    <ul class="breadcrumb">
        <li class="active"><a href="">第一页</a></li>
        <li><a href="">第二页</a></li>
        <li><a href="">第三页</a></li>
        <li><a href="">第四页</a></li>
        <li><a style="color:#ccc;"href="">第五页</a></li>
    </ul>

(二)分页组件

• 页码 pagination
  活跃active
  禁用 disabled

    <ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li class="active"><a href="">第一页</a></li>
        <li class="disabled"><a href="">第二页</a></li>
        <li><a href="">第三页</a></li>
        <li><a style="color:#ccc;"href="">&raquo;</a></li>
    </ul>

• 设置尺寸，四种格式lg md sm xs ,pagination-md(四种)

    <ul class="pagination pagination-lg">
        <li><a href="">&laquo;</a></li>
        <li class="active"><a href="">第一页</a></li>
        <li class="disabled"><a href="">第二页</a></li>
        <li><a href="">第三页</a></li>
        <li><a style="color:#ccc;"href="">&raquo;</a></li>
    </ul>

    <ul class="pagination pagination-md">
        <li><a href="">&laquo;</a></li>
        <li class="active"><a href="">第一页</a></li>
        <li class="disabled"><a href="">第二页</a></li>
        <li><a href="">第三页</a></li>
        <li><a style="color:#ccc;"href="">&raquo;</a></li>
    </ul>

    <ul class="pagination pagination-sm">
        <li><a href="">&laquo;</a></li>
        <li class="active"><a href="">第一页</a></li>
        <li class="disabled"><a href="">第二页</a></li>
        <li><a href="">第三页</a></li>
        <li><a style="color:#ccc;"href="">&raquo;</a></li>
    </ul>

    <ul class="pagination pagination-xs">
        <li><a href="">&laquo;</a></li>
        <li class="active"><a href="">第一页</a></li>
        <li class="disabled"><a href="">第二页</a></li>
        <li><a href="">第三页</a></li>
        <li><a style="color:#ccc;"href="">&raquo;</a></li>
    </ul>

• 翻页的效果上一页和下一页因为有的时候文章字数太多需要翻页
  不加previous，next 两个排在一起,加了以后两个都靠边
  翻页要是被禁用就是后面加个disabled这个类名

<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

加了previous ,next

<ul class="pager">
    <li class="previous"><a href="#">上一页</a></li>
    <li class="next"><a href="#">下一页</a></li>
</ul>

(三)标签label

• 在文本后面加标签

    <h3>标签 <span class="label label-danger">警告</span></h3>
    <h2>标签 <span class="label label-warning">警告</span></h2>
    <h4>标签 <span class="label label-success">警告</span></h4>
    <h5>标签 <span class="label label-primary">警告</span></h5>
    <h1>标签 <span class="label label-info">警告</span></h1>

(四)徽章就是未读信息 badge

    <a href="#">信息<span class="badge">10</span></a>
    <button class="btn btn-primary">
        按钮
     <span class="badge">20</span>
    </button>

• 激活自动配色

     <ul class="nav nav-tabs navtabs-justified">
         <li class="active"><a href="#">
             1
            <span class="badge">10</span>
         </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>
     </ul>