## 分页 为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。 **默认分页样式** 注意： 标记分页组件。分页组件应该包装在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">&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="##">6</a></li> <li> <a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</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">&laquo;</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">&raquo;</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">&laquo;</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">&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 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">&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 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">&raquo;</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，链接就会呈现为灰色且没有鼠标悬停效果。