Bootstrap 路径分页标签和徽章组件（七）

一、面包屑导航（路径组件）

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品列表</a></li>
    <li class="active">产品详细名称</li>
</ol>

.breadcrumb      // 定义面包屑导航

.active               // 当前项

二、分页组件

<ul class="pagination ">
     <li><a href="#">&laquo;</a></li>
     <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 class="disabled"><a href="#">5</a></li>
     <li><a href="#">&raquo;</a></li>
</ul> 
<ul class="pager">
      <li><a href="#">上一页</a></li>
      <li><a href="#">下一页</a></li>
</ul>
<ul class="pager">
      <li class="previous disabled"><a href="#">上一页</a></li>
      <li class="next"><a href="#">下一页</a></li>
</ul>

.pagination           //  定义这是一个分页

.active                  //  首选项

.disabled             //  禁用项

设置尺寸在 ul 上（从大到小）： 

.pagination-lg     

默认
.pagination-sm   

.pagination-lxs    

//   翻页效果

.pager         //  ul 上设置，默认100% 居中

.previous    //  li 上设置，上一页对齐左侧翻页

.next          //   li 上设置，下一页对齐右侧翻页

.disabled    //  li 上设置，禁用项

三、标签组件

<h3>标签 <span class="label label-default">news</span></h3>
<h5>标签 <span class="label label-success">pros</span></h5>

文字大小根据 h 标签的变化而变化

.label    //  基本的定义，控制 圆角padding 等属性

.label-default    //  默认的背景样式，灰色

// 不同色调的标签,与之前的按钮定义的颜色一样

.label-primary    //  默认蓝

.label-success    //  成功绿

.label-info    //  信息蓝

.label-warning    //  警告黄

.label-danger    //  危险红

四、徽章组件

<a href="#">信息 <span class="badge">5</span></a>
<button class="btn btn-default">提交 <span class="badge">3</span></button>   // btn-success 亦可，badge的样式会跟着变化。
<ul class="nav nav-pills">
     <li class="active"><a href="#">首页 <span class="badge">3</span></a></li>
     <li><a href="#">内页</a></li>
</ul>

.badge    //  一般用于 span 类中，表示未读信息数量的徽章 , 会根据其他不同的类别样式而改变自身的样式