一 : 分頁效果
我們可以看到在網站上的翻頁效果如下：
使用bootstrap如何實現的呢？
代碼如下：
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
分析以上代碼：
我們可以知道，實現分頁我們通過 ul>li>a的結構來實現的，我們通過對ul添加class為pagination來實現的分頁效果 通過ul>li>a>span來實現的上一頁和下一頁的功能
對於li元素：我們如果想顯示當前的頁碼，通過對於相應的li元素上添加class為 active來實現的，
同樣，如果我們想禁用特定的按鈕，我們可以對相應的li元素上添加class為disabled類來實現的
在代碼中的 aria-label的作用是進行說明的作用
對於nav元素：我們還需要在ul外面添加一個<nav>標簽元素，里面的aria-label可以用來說明是哪兒的標簽
對於ul元素：我們可以通過在ul元素上添加
.pagination-lg或者 .pagination-sm來實現分頁欄的大小改變
對於
<nav aria-label=""><ul class="pagination pagination-lg"></ul>......</nav> <nav aria-label=""><ul class="pagination "></ul></nav> <nav aria-label=""><ul class="pagination pagiantion-sm"></ul></nav>
效果如下：
二：實現翻頁效果
1如果我們不想要中間的頁碼，而只是想要上一頁和下一頁，我們可以這樣設置代碼：
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
這個默認的翻頁效果實現的是居中的效果
2實現對齊效果我們可以把鏈接向兩端對齊
通過添加class為previous或者 class="next"來實現的
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
三：實現徽章
我們通過給鏈接，導航等元素嵌套 <span class="badge">元素來展示未讀的信息條目
例如：
<a href=#>Inbox<span class="badge">42</span></a>
<button class="btn btn-primary type="button">
Messages<span class="badge">4</span>
</button>
效果如下：
四：縮略圖
縮略圖是結合柵格系統來實現的，代碼結構如下
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
給縮略圖中定義的內容加上一個父元素，添加父元素的class為 thumbnail
在縮略圖中的內容全部包裹在這個父元素之內
縮略圖就是定義在bootstrap中的柵格系統中
五：警告框
1，對於普通警告框，我們通過定義 .alert 類來提示這是一個警告框
代碼如下：
<div class="alert" role="alert">....</div>
2,對於顯示信息的警告框
我們通過：
alert-success
alert-info
alert-warning
alert-danger
例如：
如下代碼：
<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
上面是alert-success的警告框
3，可關閉的警告框
我們要實現警告框可關閉的功能，代碼如下：
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
我們需要給警告框添加一個可選的 .alert-dismissable類和一個關閉按鈕
注意關閉按鈕：下面是我進行的實驗，探索按鈕不同部分的功能
- class="close"表明這是一個關閉按鈕，缺少了這個按鈕會移向右邊
- data-dismiss="alert"表明這是為警告框進行關閉的按鈕 上面這兩個是必須的
- aria-label僅僅作為說明，這是一個close選項
最終效果如下：
點擊叉號警告塊會消失
4，警告框中的鏈接
使用 .alert-link類可以實現設置與當前警告框相符的鏈接顏色
代碼如下：
<div class="alert alert-success" role=“alert”>
<a href="#" class="alert-link"></a>
</div>
效果如下：