Bootstrap5 分页

以下是关于 Bootstrap 5 分页（Pagination） 的详细指南，包含目录、内部锚链接、出站链接和参考资料。我将从基本概念、使用方法到高级功能逐一讲解，帮助您快速掌握 Pagination 的使用。

Bootstrap 5 分页（Pagination）指南

什么是 Pagination

Pagination 是 Bootstrap 5 提供的一种导航组件，用于将内容分成多个页面并提供分页导航链接。它常用于文章列表、搜索结果或数据表格的分页显示，帮助用户浏览大量内容。

出站链接：查看 Bootstrap 5 Pagination 官方文档。

基本使用

HTML 结构

Pagination 使用 .pagination 类定义，分页项使用 .page-item 和 .page-link。

基本示例

以下是一个简单的分页示例：

<nav aria-label="分页导航">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">上一页</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="#">下一页</a></li>
  </ul>
</nav>

.pagination：分页容器。
.page-item：单个分页项。
.page-link：分页链接。
aria-label：提升可访问性。

高级用法

带禁用和激活状态

通过 .disabled 和 .active 类表示不可用和当前页。

示例代码：

<nav aria-label="分页导航">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</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="#">下一页</a></li>
  </ul>
</nav>

.disabled：禁用分页项。
.active：高亮当前页。

自定义大小

通过 .pagination-lg 或 .pagination-sm 调整分页大小。

示例代码：

<nav aria-label="大分页">
  <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

<nav aria-label="小分页">
  <ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

对齐方式

使用 Flex 实用类调整分页的对齐方式。

示例代码：

<nav aria-label="分页导航">
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

<nav aria-label="分页导航">
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

.justify-content-center：居中对齐。
.justify-content-end：右对齐。

自定义样式

通过 CSS 或 Bootstrap 的类调整分页外观。

示例代码：

<style>
  .custom-pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
  }
  .custom-pagination .page-link {
    color: #007bff;
  }
  .custom-pagination .page-link:hover {
    background-color: #e9ecef;
  }
</style>

<nav aria-label="自定义分页">
  <ul class="pagination custom-pagination">
    <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>
  </ul>
</nav>

动态分页

通过 JavaScript 动态生成分页。

示例代码：

<nav aria-label="动态分页">
  <ul class="pagination" id="dynamicPagination"></ul>
</nav>

<script>
  const totalPages = 5;
  const pagination = document.getElementById('dynamicPagination');
  let html = '<li class="page-item"><a class="page-link" href="#">上一页</a></li>';

  for (let i = 1; i <= totalPages; i++) {
    html += `<li class="page-item ${i === 1 ? 'active' : ''}"><a class="page-link" href="#">${i}</a></li>`;
  }

  html += '<li class="page-item"><a class="page-link" href="#">下一页</a></li>';
  pagination.innerHTML = html;
</script>

出站链接：参考 Bootstrap 5 JavaScript。

注意事项

依赖性：Pagination 不需额外 JavaScript，仅依赖 CSS。
可访问性：确保使用 aria-label 和 aria-current 属性。
链接功能：实际应用中需结合后端或前端路由处理分页逻辑。
样式冲突：自定义样式时注意优先级，避免覆盖默认行为。

参考资料

以下是与 Bootstrap 5 Pagination 相关的外部资源：

总结

Bootstrap 5 的 Pagination 是一个简单而实用的组件，支持禁用状态、大小调整和对齐方式。通过简单的类和动态生成，您可以轻松实现分页导航。如果您有具体问题或场景，请随时告诉我！