Bootstrap5分页组件：列表分页实现快速方法

在网页开发中，当我们需要展示大量列表数据（如商品列表、文章列表等）时，直接将所有数据显示在一页会导致页面过长、加载缓慢，用户体验差。这时，分页组件就派上用场了——它可以将数据分成多页，让用户通过点击不同页码来浏览内容。Bootstrap5 提供了现成的分页组件，无需复杂的 CSS 或 JavaScript 代码，只需简单的 HTML 结构和类名就能快速实现美观且功能完整的分页效果。

一、准备工作：引入 Bootstrap5¶

要使用 Bootstrap5 的分页组件，首先需要在项目中引入 Bootstrap5 的 CSS（如果需要交互功能，还需引入 JavaScript）。以下是最简单的引入方式（使用 CDN）：

<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- （可选）引入 Bootstrap5 JS（若需要下拉菜单、模态框等交互功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

如果需要在分页中使用图标（如“上一页/下一页”的箭头），还需引入 Bootstrap Icons（同样用 CDN）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

二、Bootstrap5 分页组件的基本结构¶

Bootstrap5 的分页组件基于列表（<ul>）和列表项（<li>）构建，通过特定的类名控制样式和状态。核心结构如下：

<ul class="pagination">
  <!-- 上一页按钮 -->
  <li class="page-item"><a class="page-link" href="#">上一页</a></li>

  <!-- 页码项 -->
  <li class="page-item active"><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>

关键类名解释：¶

pagination：给 <ul> 标签添加，定义分页容器的基础样式（如间距、圆角等）。
page-item：给 <li> 标签添加，定义每个页码/按钮的容器。
page-link：给 <a> 标签（或 <button>）添加，定义可点击链接的样式（如颜色、边框等）。
active：给当前页码的 <li> 标签添加，高亮显示当前页（如背景色、边框等）。
disabled：给禁用的页码/按钮的 <li> 标签添加，使其不可点击（如“上一页”在第一页时禁用）。

三、常见分页场景与示例¶

上面的示例已经是最基础的分页结构，包含“上一页”“1”“2”“3”“下一页”。其中：
- active 用于标记当前页码（如“1”），页面加载时默认显示在第一页。
- href="#" 是占位符，实际项目中需替换为对应页码的 URL（如 href="?page=2"）。

2. 禁用状态（边界页处理）¶

当页码处于边界（如第一页时“上一页”不可点击，最后一页时“下一页”不可点击），需给对应 <li> 添加 disabled 类：

<ul class="pagination">
  <!-- 第一页时禁用“上一页” -->
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">上一页</a>
  </li>

  <li class="page-item active"><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 disabled">
    <a class="page-link" href="#" tabindex="-1">下一页</a>
  </li>
</ul>

tabindex="-1"：可选属性，用于确保禁用状态的元素在键盘导航中无法被聚焦（提升无障碍性）。

3. 居中对齐分页¶

通过 Bootstrap 的 Flex 布局类 .justify-content-center，让分页内容居中显示：

<ul class="pagination justify-content-center">
  <!-- 页码项同上 -->
</ul>

4. 带图标的分页¶

结合 Bootstrap Icons，给“上一页/下一页”添加箭头图标，更直观：

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">
      <i class="bi bi-arrow-left"></i> 上一页
    </a>
  </li>

  <li class="page-item active"><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="#">下一页 <i class="bi bi-arrow-right"></i></a>
  </li>
</ul>

5. 调整分页尺寸¶

Bootstrap5 提供了 .pagination-sm（小尺寸）和 .pagination-lg（大尺寸）类，快速调整分页大小：

<!-- 小尺寸分页 -->
<ul class="pagination pagination-sm">...</ul>

<!-- 大尺寸分页 -->
<ul class="pagination pagination-lg">...</ul>

四、扩展与最佳实践¶

替换 <a> 为 <button>：如果页码是通过 JavaScript 动态加载数据（而非页面跳转），可将 <a> 改为 <button>，并添加 onclick 事件处理：

   <li class="page-item"><button class="page-link" onclick="loadPage(2)">2</button></li>

动态生成页码：实际项目中，页码数量可能根据总数据量变化（如总页数 10 时显示 1-10，总页数 20 时显示 1-5 等），可通过后端接口返回总页数，前端用 JavaScript 循环生成页码项。
语义化与 SEO：避免使用 href="#" 占位符，建议用实际的 URL（如 href="/products?page=2"），方便搜索引擎抓取和用户直接访问。

总结¶

Bootstrap5 分页组件通过简单的 HTML 结构和 CSS 类名，即可快速实现美观、响应式的分页效果，无需重复编写样式。初学者只需掌握核心类名（pagination、page-item、page-link）和状态标记（active、disabled），就能应对大部分分页场景。如果需要更复杂的交互（如动态加载数据），可在此基础上结合 JavaScript 实现。