如何在 Bootstrap 4 中创建分页

Bootstrap 4 提供了一种简单的方法来创建分页。以下是如何在 Bootstrap 4 中创建分页的步骤：

1. 确定您的分页需要

在开始编写分页代码之前，请确定您需要的页面分页类型和页数。这将确定您需要的代码和样式。

2. 使用分页组件

分页组件是 Bootstrap 4 中专门用于分页的内置组件。使用分页组件可以轻松地添加分页到您的网站中。以下是如何使用分页组件：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><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>

请注意：

• 分页组件被包含在一个 nav 元素中。
• aria-label 在适当的情况下提供了分页组件的识别信息。
• 分页链接被包含在一个无序列表 ul 元素中。
• 使用 page-item 类为链接添加正确的样式。
• 分页链接使用 page-link 类添加样式。

3. 自定义 CSS 样式

如果您不满意默认分页样式，则可以自定义 CSS 样式，以使分页符合您的网站设计。

4. 添加分页处理程序

使用分页控件通常需要添加一个分页处理程序。这是处理分页链接单击的 JavaScript 代码。您可以使用 jQuery 或 JavaScript 来编写分页处理程序。

例如，以下是使用 jQuery 编写的分页处理程序：

$(document).ready(function(){
  $('ul.pagination li a').click(function(e){
    e.preventDefault();
    var page = $(this).text().trim();
    alert("You clicked page " + page);
  });
});

5. 测试和优化

完成编写代码后，请确保测试分页功能，并根据需要进行调整和优化。