Bootstrap5 分页

分页是一种常见的用户界面组件，用于将大量内容分成多个页面，以提高用户体验。Bootstrap 5 提供了一套简洁而功能强大的分页样式和组件，帮助开发者快速实现分页功能。

基础分页

基础的分页样式非常简单，只需要为 <ul> 元素添加 .pagination 类即可。此外，每个分页项都应使用带有 .page-item 类的 <li> 元素包裹，并且每个链接都应该使用带有 .page-link 类的 <a> 元素。

// www.javascriptcn.com code example
<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>

禁用状态

分页中的某些项可能需要被禁用，例如当用户处于第一页时，“上一页”按钮就应该被禁用。可以通过给 <li> 元素添加 .disabled 类来实现这一效果。

// www.javascriptcn.com code example
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">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>

活动状态

当前页的分页项应该显示为活动状态，以提示用户他们当前所在的页面。这可以通过给 <li> 元素添加 .active 类来实现。

// www.javascriptcn.com code example
<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 active"><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>

各种尺寸

除了默认的分页样式外，Bootstrap 5 还提供了不同尺寸的分页样式。通过给 <ul> 元素添加 .pagination-lg 或 .pagination-sm 类，可以改变分页组件的大小。

// www.javascriptcn.com code example
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-lg">
    <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="Page navigation example">
  <ul class="pagination pagination-sm">
    <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>

自定义分页样式

为了满足更复杂的需求，你可以自定义分页样式。这可以通过覆盖默认的 CSS 样式或使用自定义类来实现。例如，如果你想给所有的分页项添加一个背景颜色，你可以这样做：

.custom-pagination .page-link {
  background-color: #f0f0f0;
}

.custom-pagination .page-item.active .page-link {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

然后在 HTML 中应用这个自定义类：

// www.javascriptcn.com code example
<nav aria-label="Page navigation example">
  <ul class="pagination custom-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>

通过这些基本的分页样式和一些简单的定制，你可以轻松地为你的项目添加用户友好的分页功能。希望这些示例能帮助你更好地理解和使用 Bootstrap 5 的分页组件。