Bootstrap 分页

Bootstrap 的分页（Pagination）组件是其组件库中的一个轻量级导航工具，用于将长内容分成多个页面，帮助用户在数据集合（如文章列表、搜索结果）中导航。分页组件提供灵活的样式和交互功能，适合表格、列表或任何需要分页的场景。以下是对Bootstrap 分页组件的中文讲解，涵盖核心功能、类名、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月 11 日）。

Bootstrap 分页示例

基本分页

带禁用和激活状态

不同尺寸

居中对齐

带省略号

1. Bootstrap 分页概述

Bootstrap 的分页组件（Pagination）用于创建页面导航链接，帮助用户在多页内容中切换。其主要特点包括：

简单直观：提供清晰的页面导航，适合列表、表格或搜索结果。
灵活性：支持激活、禁用状态、不同尺寸和对齐方式。
轻量级：仅依赖 CSS，无需 JavaScript（除非动态生成）。
响应式：自动适配不同屏幕尺寸。
可访问性：支持 ARIA 属性，优化屏幕阅读器体验。

分页组件通常由以下元素组成：

容器：<nav> 使用 aria-label="pagination"。
列表：<ul> 使用 .pagination 类。
列表项：<li> 使用 .page-item 类。
链接：<a> 或 <span> 使用 .page-link 类。

2. 核心分页类

以下是Bootstrap 分页组件的主要类和用法：

(1) 基本分页

使用 .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 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>

必要属性：
aria-label="pagination"：为屏幕阅读器提供语义。
aria-current="page"：标记当前页面。
.active：高亮当前页面。

(2) 禁用和激活状态

激活状态：使用 .active 高亮当前页面。
禁用状态：使用 .disabled 或 <span> 禁用不可点击的页面。
用法：

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

(3) 不同尺寸

调整分页的尺寸：

.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>

(4) 对齐方式

使用 Flexbox 工具类调整分页的对齐：

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

  <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>

(5) 省略号

使用 <span class="page-link">...</span> 表示省略的页面。

用法：

  <nav aria-label="分页导航">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item disabled"><span class="page-link">...</span></li>
      <li class="page-item"><a class="page-link" href="#">10</a></li>
    </ul>
  </nav>

(6) 响应式分页

结合响应式工具类调整分页在不同屏幕尺寸下的显示。

用法：

  <nav aria-label="分页导航">
    <ul class="pagination d-flex flex-wrap">
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item d-none d-md-block"><a class="page-link" href="#">2</a></li>
    </ul>
  </nav>

效果：在小屏幕上换行，中等屏幕显示更多页面。

3. 动态分页

分页通常是静态的，但在动态网站中，可通过 JavaScript 动态生成。

示例：

  const pagination = document.querySelector('.pagination');
  const pages = 5;
  let html = '<li class="page-item"><a class="page-link" href="#">上一页</a></li>';
  for (let i = 1; i <= pages; i++) {
    html += `<li class="page-item ${i === 1 ? 'active' : ''}" aria-current="${i === 1 ? 'page' : ''}">
      <a class="page-link" href="#">${i}</a>
    </li>`;
  }
  html += '<li class="page-item"><a class="page-link" href="#">下一页</a></li>';
  pagination.innerHTML = html;

4. 定制分页

分页的样式基于 Sass 变量和 CSS 变量，可通过以下方式定制：

背景：$pagination-bg、$pagination-active-bg。
边框：$pagination-border-color、$pagination-border-radius。
字体：$pagination-font-size。

定制示例：

// custom.scss
$pagination-bg: #f8f9fa;
$pagination-active-bg: #ff5733;
$pagination-border-radius: 0.5rem;

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

5. 注意事项

可访问性：使用 aria-label="pagination" 和 aria-current="page" 确保屏幕阅读器支持。
动态生成：动态分页时，确保 href 属性指向正确页面或使用 JavaScript 阻止默认跳转。
响应式测试：在小屏幕上测试分页，确保不溢出或换行合理。
性能：避免过多页面链接，必要时使用省略号。
样式冲突：注意分页与其他组件（如导航栏）结合时的样式优先级。

6. 学习资源

官方文档：https://getbootstrap.com/docs/5.3/components/pagination/
中文教程：https://www.bootcss.com/（非官方）
X 平台：搜索“Bootstrap 分页”或“Bootstrap Pagination”，查看社区分享的设计技巧。

如果你需要更详细的分页讲解（例如动态分页、结合 AJAX 加载）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！