前面的話

　　分頁導航幾乎在每個網站都可見，好的分頁能給用戶帶來好的用戶體驗。本文將詳細介紹Bootstrap分頁

?

概述

　　在Bootstrap框架中提供了兩種分頁導航：

?　　? ??? 帶頁碼的分頁導航

　　?? ??? 帶翻頁的分頁導航

?

頁碼分頁

　　帶頁碼的分頁導航，可能是最常見的一種分頁導航，特別是在列表頁內容超多的時候，會給用戶提供分頁的導航方式

【默認分頁】

　　平時很多人喜歡用

div>a和 div>span結構來制作帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是 ul>li>a這樣的結構，在ul標簽上加入pagination方法：

<nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&raquo;</span></a></li></ul> </nav>

style="width: 100%; height: 110px;" src="https://demo.xiaohuochai.site/bootstrap/page/p1.html" frameborder="0" width="320" height="240">

【狀態】

　　鏈接在不同情況下可以定制。可以給不能點擊的鏈接添加?

.disabled?類、給當前頁添加? .active?類

　　最好將 active 或 disabled 狀態的鏈接（即?

<a>?標簽）替換為? <span>?標簽，或者在向前/向后的箭頭處省略 <a>?標簽，這樣就可以讓其保持需要的樣式而不能被點擊

<nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><span aria-label="Previous"><span aria-hidden="true">&laquo;</span></span></li><li class="active"><span>1</span></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">&raquo;</span></a></li></ul> </nav>

style="width: 100%; height: 110px;" src="https://demo.xiaohuochai.site/bootstrap/page/p2.html" frameborder="0" width="320" height="240">

【尺寸】

　　在Bootstrap框架中，可以通過兩種不同的情況來設置其大小，類似于按鈕一樣：

　　1、通過“pagination-lg”讓分頁導航變大

　　2、通過“pagination-sm”讓分頁導航變小

<nav aria-label="Page navigation"><ul class="pagination pagination-lg"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&raquo;</span></a></li></ul> </nav><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&raquo;</span></a></li></ul> </nav><nav aria-label="Page navigation"><ul class="pagination pagination-sm"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&raquo;</span></a></li></ul> </nav>

style="width: 100%; height: 275px;" src="https://demo.xiaohuochai.site/bootstrap/page/p3.html" frameborder="0" width="320" height="240">

?

翻頁

　　Bootstrap框架除了提供帶頁碼的分頁導航之外還提供了翻頁導航。這種分頁導航常常在一些簡單的網站上看到，比如說個人博客，雜志網站等。這種分頁導航是看不到具體的頁碼，只會提供一個“上一頁”和“下一頁”的按鈕

【默認用法】

　　在實際使用中，翻頁分頁導航和帶頁碼的分頁導航類似，為ul標簽加入

pager類

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

style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/page/p4.html" frameborder="0" width="320" height="240">

【對齊設置】

　　默認情況之下，翻頁分頁導航是居中顯示，但有的時候我們需要一個居左，一個居右。Bootstrap框架提供了兩個樣式：

　　????previous：讓“上一步”按鈕居左

　　????next：讓“下一步”按鈕居右

　　具體使用的時候，只需要在

li標簽上添加對應類名即可

　　實現原理很簡單，就是一個進行了左浮動，一個進行了右浮動

.pager .next > a, .pager .next > span { float: right; } .pager .previous > a, .pager .previous > span { float: left; } <ul class="pager"><li class="previous"><a href="#">&larr;上一頁</a></li><li class="next"><a href="#">下一頁&rarr;</a></li> </ul>

style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/page/p5.html" frameborder="0" width="320" height="240">

【狀態設置】

　　和帶頁碼分頁導航一樣，如果在li標簽上添加了disabled類名的時候，分頁按鈕處于禁用狀態，但同樣不能禁止其點擊功能。可以通過js來處理，或將

a標簽換成 span標簽

.pager .disabled > a, .pager .disabled >a:hover, .pager .disabled >a:focus, .pager .disabled > span {color: #999;cursor: not-allowed;background-color: #fff; } <ul class="pager"><li class="disabled"><span>&laquo;上一頁</span></li><li><a href="#">下一頁&raquo;</a></li> </ul>

style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/page/p6.html" frameborder="0" width="320" height="240">

?

總結

以上是生活随笔為你收集整理的Bootstrap分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。