Bootstrap路徑分頁標簽和徽章組件
學習要點：
1.路徑組件
2.分頁組件
3.標簽組件
4.徽章組件
本節(jié)課我們主要學習一下 Bootstrap 的四個組件功能：路徑組件、分頁組件、標簽組件 和徽章組件。
一．路徑組件
路徑組件也叫做面包屑導航。
面包屑導航
breadcrumb樣式class類，寫在<ul>或<ol>里，設置面包屑導航(Bootstrap)
<ol class="breadcrumb"> <li><a href="#">首頁</a></li> <li><a href="#">產(chǎn)品列表</a></li> <li class="active">韓版 2015 年羊絨毛衣</li></ol>
二．分頁組件
分頁組件可以提供帶有展示頁面的功能。
默認分頁
pagination樣式class類，寫在<ul>里，設置默認分頁樣式(Bootstrap)
<ul class="pagination"> <li><a href="#">«</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="#">»</a></li></ul>
首選項和禁用
active樣式class類，寫在<li>里，首選項樣式(Bootstrap)
disabled樣式class類，寫在<li>里，禁用項樣式(Bootstrap)
<ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li></ul>
設置尺寸，四種 lg、默認、sm 和 xs
pagination-lg樣式class類，寫在<ul>里，設置分頁樣式為大尺寸(Bootstrap)
pagination-xs樣式class類，寫在<ul>里，設置分頁樣式為中尺寸(Bootstrap)
pagination-sm樣式class類，寫在<ul>里，設置分頁樣式為小尺寸(Bootstrap)
<ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a></li></ul><br><ul class="pagination pagination-xs"> <li><a href="#">«</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="#">»</a></li></ul><br><ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a></li></ul>
對齊翻頁鏈接
pager樣式class類，寫在<ul>里，設置翻頁樣式(Bootstrap)
previous樣式class類，寫在翻頁<ul>的li里，設置翻頁左對齊(Bootstrap)
next樣式class類，寫在翻頁<ul>的li里，設置翻頁右對齊(Bootstrap)
<ul class="pager"> <li class="previous"><a href="#">上一頁</a></li> <li class="next"><a href="#">下一頁</a></li></ul>
翻頁項禁用
disabled樣式class類，寫在翻頁<ul>的li里，禁用翻頁項(Bootstrap)
<ul class="pager"> <li class="previous"><a href="#">上一頁</a></li> <li class="next disabled"><a href="#">下一頁</a></li></ul>
三．標簽
在文本后面帶上標簽
label樣式class類，寫在<span>里，聲明一個標簽(Bootstrap)
label-default樣式class類，寫在<span>里，設置標簽默認樣式(Bootstrap)
<h3>標簽 <span class="label label-default">new</span></h3>
不同色調(diào)的標簽樣式
label-primary樣式class類，寫在<span>里，設置標簽樣式藍色(Bootstrap)
label-success樣式class類，寫在<span>里，設置標簽樣式綠色(Bootstrap)
label-info樣式class類，寫在<span>里，設置標簽樣式淺藍(Bootstrap)
label-warning樣式class類，寫在<span>里，設置標簽樣式橙色(Bootstrap)
label-danger樣式class類，寫在<span>里，設置標簽樣式紅色(Bootstrap)
<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>
四．徽章
未讀信息數(shù)量徽章
badge樣式class類，寫在<span>里，設置徽章樣式(Bootstrap)
<a href="#">信息 <span class="badge">10</span></a>
按鈕中使用徽章
<button class="btn btn-success"> 提交 <span class="badge">3</span></button>
激活狀態(tài)自動適配色調(diào)
<ul class="nav nav-pills"> <li class="active"> <a href="#">首頁 <span class="badge">2</span></a> </li> <li><a href="#">資訊</a></li></ul>
