（八）路徑（面包屑導航）分頁標簽和徽章組件

一．路徑組件?

路徑組件也叫做面包屑導航。?

<ol class="breadcrumb"><li><a href="#">首頁</a></li><li><a href="#">產品列表</a></li><li><a href="#">大衣</a></li><li class="active">毛呢大衣</li>
</ol>

?

二．分頁組件?

1、基本實例

分頁組件可以提供帶有展示頁面的功能。?

<ul class="pagination"><li><a href="#">&laquo;</a></li><li><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>

2、首選項和禁用?

<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>

3、設置尺寸，四種 lg、默認、sm 和 xs?

<ul class="pagination pagination-lg">

?

4、翻頁效果?

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

5、對齊翻頁鏈接?

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

?

?6、翻頁項禁用?

<li class="previous disabled"><a href="#">上一頁</a></li>

?

?三．標簽

1、?在文本后面帶上標簽?

<h3>標簽 <span class="label label-default">new</span></h3>

2、不同色調的標簽?

<h3>標簽 <span class="label label-primary">new</span></h3>
<h3>標簽 <span class="label label-success">new</span></h3>
<h3>標簽 <span class="label label-info">new</span></h3>
<h3>標簽 <span class="label label-warning">new</span></h3>
<h3>標簽 <span class="label label-danger">new</span></h3>

?

四．徽章

1、未讀信息數量徽章?

<a href="#">信息 <span class="badge">10</span></a>

2、按鈕中使用徽章?

<button class="btn btn-success"> 提交 <span class="badge">3</span></button>

3、激活狀態自動適配色調?

<ul class="nav nav-pills"><li class="active"><a href="#">首頁 <span class="badge">2</span></a></li><li><a href="#">資訊</a></li>
</ul>

?