Bootstrap 5 分页 - CSS

Bootstrap 5 是一个强大的前端框架，能够帮助程序员设计出现代化的响应式网站。其中，分页是一个非常常见的功能，Bootstrap 5 提供了一组简单易用的 CSS 类，可以快速地实现分页效果。

Bootstrap 5 分页 CSS 类

Bootstrap 5 提供了以下 5 个 CSS 类，用于实现分页效果：

• .pagination：定义一个分页容器，其中包含多个页码按钮。
• .page-item：定义一个页码按钮，它可以包含一个链接或按钮。
• .page-link：定义一个页码按钮的链接或按钮本身。
• .active：定义当前所选页码按钮的样式。
• .disabled：定义禁用页码按钮的样式。

如何使用 Bootstrap 5 分页

使用 Bootstrap 5 分页非常简单，只需要按照以下步骤进行：

1. 在 HTML 文件中包含 Bootstrap 5 的 CSS 文件和 JavaScript 文件：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
   

2. 在分页容器中添加 .pagination 类：

   <nav>
     <ul class="pagination">
       <!-- 在这里添加页码按钮 -->
     </ul>
   </nav>
   

3. 在页码按钮中添加 .page-item 类，并添加一个链接或按钮：

   <li class="page-item">
     <a class="page-link" href="#">1</a>
   </li>
   

4. 在当前页码按钮中添加 .active 类：

   <li class="page-item active">
     <a class="page-link" href="#">2</a>
   </li>
   

5. 在禁用的页码按钮中添加 .disabled 类：

   <li class="page-item disabled">
     <a class="page-link" href="#" tabindex="-1" aria-disabled="true">...</a>
   </li>
   

6. 根据需要添加更多的页码按钮，以及上一页和下一页按钮。

实例

以下是一个简单的分页例子，包括上一页按钮、页码按钮和下一页按钮：

<nav>
  <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 active" aria-current="page">
      <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>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

以上代码会生成一个包含页码按钮和上一页/下一页按钮的分页效果。按钮的样式由 Bootstrap 5 的默认样式控制，你也可以根据需求自定义样式。

总结

通过使用 Bootstrap 5 提供的 CSS 类，我们可以轻松地实现分页效果。只需要按照标准步骤进行，即可快速生成漂亮的分页组件。希望本文能够对你的开发工作有所帮助！