## 分頁
為您的網站或應用提供帶有展示頁碼的分頁組件,或者可以使用簡單的翻頁組件。
**默認分頁樣式**
注意:
標記分頁組件。分頁組件應該包裝在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>
```

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

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

*****
**翻頁**
用簡單的標記和樣式,就能做個上一頁和下一頁的簡單翻頁。用在像博客和雜志這樣的簡單站點上棒極了。
**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>
```

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

**3.** 可選的禁用狀態
`.disabled`類也可用于翻頁中的鏈接讓元素處于禁用狀態,只需在需要禁用的元素上添加類.disabled,鏈接就會呈現為灰色且沒有鼠標懸停效果。

- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)