Bootstrap 分页

Bootstrap 5 分页

基本分页

对于包含多页内容的网站，如博客、搜索结果或产品列表，分页提供了一种直观的方式，方便用户在这些页面之间导航。

Bootstrap 5 中的一个基本分页组件如下所示：

要创建此效果，请用 .pagination 类包装一个 <ul> 元素。在内部，使用带 .page-item 类的 <li> 元素，以及带 .page-link 类的 <a> 元素。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
  </ul>
</nav>

无障碍注意事项：确保分页组件包裹在 <nav> 元素中，并包含一个 aria-label 来描述其用途，例如 aria-label="Page navigation"。

激活状态

激活状态表示当前页面。将 .active 类添加到当前页面的 .page-item 上。

建议将 aria-current="page" 添加到激活的 .page-item 上，以获得更好的无障碍性。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

禁用状态

在 .page-item 上使用 .disabled 类来指示链接（例如，第一页的“Previous”或最后一页的“Next”）不可点击。

对于禁用的 .page-item 中的链接，添加 tabindex="-1" 和 aria-disabled="true" 以提高无障碍性。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

分页尺寸

需要更大或更小的分页？向 .pagination <ul> 添加 .pagination-lg 或 .pagination-sm 类来获得额外尺寸。

大型分页：

小型分页：

<!-- Large -->
<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- Small -->
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

对齐

你可以使用 Flexbox 工具类，如 .justify-content-center 或 .justify-content-end，将分页向中或向右对齐。这些类应用于父级 .pagination <ul> 元素。

<!-- 居中对齐 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

<!-- 右对齐 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

应用场景：一个搜索结果页面，每页显示 10 条结果。分页使用户可以轻松浏览数百条结果。在第 1 页上，“Previous”按钮会被禁用，在最后一页上，“Next”按钮会被禁用。当前页码会被高亮显示。

有关分页及其选项的更多详情，请查阅 Bootstrap 官方文档。