9、分頁 · Bootstrap前端響應式框架學習技術分享總結

## 分頁為您的網站或應用提供帶有展示頁碼的分頁組件，或者可以使用簡單的翻頁組件。 **默認分頁樣式** 注意：標記分頁組件。分頁組件應該包裝在nav元素中，以將其標識為屏幕閱讀器和其他輔助技術的導航部分。此外，由于一個頁面可能已經有多個這樣的導航部分（例如標題中的主導航或側欄導航），建議為nav提供一個描述性的aria標簽，以反映其用途。例如，如果分頁組件用于在一組搜索結果之間導航，則適當的標簽可以是aria label=“search results pages”。 ```html <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="##">6</a></li> <li> <a href="##" aria-label="Next"><span aria-hidden="true">»</span></a> </li> </ul> </nav> ``` ![](https://img.kancloud.cn/a5/1a/a51a2b3b7e701531de42df4cedd26994_696x75.png) **1.** 禁用和激活狀態鏈接在不同情況下可以定制。你可以給不能點擊的鏈接添加`.disabled`類、給當前頁添加`.active`類。 ```html <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 class="disabled"><a href="##">2</a></li> <li class="active"><a href="##">3</a></li> <li><a href="##">4</a></li> <li><a href="##">5</a></li> <li><a href="##">6</a></li> <li> <a href="##" aria-label="Next"><span aria-hidden="true">»</span></a> </li> </ul> </nav> ``` ![](https://img.kancloud.cn/8b/de/8bde37ecb2ef8a55fdd86b55fde69eec_799x91.png) **2.** 尺寸如果想要更小或更大的分頁，`.pagination-lg`或`.pagination-sm`類提供了額外可供選擇的尺寸。 ```html <nav aria-label="Page navigation"> <ul class="pagination pagination-lg"> <li> <a href="##" aria-label="Previous"><span aria-hidden="true">«</span></a> </li> <li><a href="##">1</a></li> <li class="disabled"><a href="##">2</a></li> <li class="active"><a href="##">3</a></li> <li><a href="##">4</a></li> <li><a href="##">5</a></li> <li><a href="##">6</a></li> <li> <a href="##" aria-label="Next"><span aria-hidden="true">»</span></a> </li> </ul> </nav> <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 class="disabled"><a href="##">2</a></li> <li class="active"><a href="##">3</a></li> <li><a href="##">4</a></li> <li><a href="##">5</a></li> <li><a href="##">6</a></li> <li> <a href="##" aria-label="Next"><span aria-hidden="true">»</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">«</span></a> </li> <li><a href="##">1</a></li> <li class="disabled"><a href="##">2</a></li> <li class="active"><a href="##">3</a></li> <li><a href="##">4</a></li> <li><a href="##">5</a></li> <li><a href="##">6</a></li> <li> <a href="##" aria-label="Next"><span aria-hidden="true">»</span></a> </li> </ul> </nav> ``` ![](https://img.kancloud.cn/58/82/5882ae86527c18c76109f71022ff9e17_990x293.png) ***** **翻頁** 用簡單的標記和樣式，就能做個上一頁和下一頁的簡單翻頁。用在像博客和雜志這樣的簡單站點上棒極了。 **1.** 默認實例在默認的翻頁中，鏈接居中對齊。 ```html <nav aria-label="..."> <ul class="pager"> <li><a href="#">上一頁</a></li> <li><a href="##">4</a></li> <li><a href="##">5</a></li> <li><a href="##">6</a></li> <li><a href="#">下一頁</a></li> </ul> </nav> ``` ![](https://img.kancloud.cn/8a/0c/8a0c6a0a38cfec4f36c2facf2fcbcd35_987x61.png) **2.** 左右兩端對齊鏈接左右兩端對齊鏈接可使用 .previous(左對齊)和 .next（右對齊） ```html <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="#">上一頁</a></li> <li><a href="##">4</a></li> <li><a href="##">5</a></li> <li><a href="##">6</a></li> <li class="next"><a href="#">下一頁</a></li> </ul> </nav> ``` ![](https://img.kancloud.cn/6f/fd/6ffd0d47214c79382519a81418a4aafc_997x59.png) **3.** 可選的禁用狀態 `.disabled`類也可用于翻頁中的鏈接讓元素處于禁用狀態，只需在需要禁用的元素上添加類.disabled，鏈接就會呈現為灰色且沒有鼠標懸停效果。 ![](https://img.kancloud.cn/cd/d5/cdd5756d3d9fd084b324ba6d7f760078_997x63.png)