Bootstrap 分页导航

Bootstrap 5 类似 Pager 的导航

理解 Pager 功能

在旧版本的 Bootstrap（例如 Bootstrap 3）中，‘Pager’ 组件提供了简单的上一页和下一页导航链接，通常用于在文章页面或流程步骤之间导航。

这个特定的 .pager 组件在 Bootstrap 4 中被移除，并且在 Bootstrap 5 中也不存在。然而，使用更通用的 Pagination 组件或结合 flex 工具类进行自定义按钮/链接样式设置，可以轻松实现类似的功能。

要创建简单的上一页/下一页导航链接，您可以使用 Bootstrap 5 Pagination 组件的简化版本。

基本的上一页/下一页链接（居中）：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <nav aria-label="Basic pager navigation example">
   <ul class="pagination justify-content-center">
    <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="#">Next</a></li>
   </ul>
  </nav>
 </body>
</html>

当上一页/下一页链接不应处于活动状态时（例如，在第一页或最后一页），在 .page-item 上使用 .disabled 类。

对齐的上一页/下一页链接

要将“上一页”对齐到一侧，将“下一页”对齐到另一侧，类似于旧版 Pager 的对齐行为，您可以在 .pagination 容器上使用 flex 工具类。

使用 justify-content-between 的示例：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <nav aria-label="Aligned pager navigation example">
   <ul class="pagination justify-content-between">
    <li class="page-item">
     <a class="page-link" href="#">&larr; Older</a>
    </li>
    <li class="page-item">
     <a class="page-link" href="#">Newer &rarr;</a>
    </li>
   </ul>
  </nav>
 </body>
</html>

或者，如果您只有两个项目并希望将其中一个推到末尾，可以在其中一个项目上使用像 ms-auto（起始外边距：自动）这样的外边距工具类。

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <nav aria-label="Aligned pager with ms-auto">
   <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item ms-auto"><a class="page-link" href="#">Next</a></li>
   </ul>
  </nav>
 </body>
</html>

更多导航选项

对于更复杂的分页需求，包括编号页面、活动状态等，请在官方文档或相关教程中探索 Bootstrap 5 Pagination 组件的全部功能。