Bootstrap4 分页（一文讲透）

什么是 Bootstrap4 分页？

在网页开发中，当数据量较大时，我们不可能一次性展示所有内容。比如一个商品列表有 500 个条目，如果全部堆在一页上，不仅加载慢，用户体验也极差。这时就需要用到“分页”功能，把内容拆分成多页，用户可以点击“下一页”或“上一页”来浏览。

Bootstrap4 分页就是 Bootstrap 框架中用来实现这种分页功能的一套现成组件。它提供了简洁、响应式、语义化的 HTML 结构和 CSS 类，让你不用从零开始写样式，就能快速构建出美观且兼容多种设备的分页导航。

你可以把 Bootstrap4 分页想象成一本电子书的页码导航栏：每一页代表一部分数据，点击数字或“上一页”“下一页”按钮就能跳转到对应页。而 Bootstrap 就是帮你自动排版这个导航栏的“排版工具”。

基础结构与核心类名

使用 Bootstrap4 分页，核心是 pagination 这个类。所有分页元素都必须包裹在带有 pagination 类的 <ul> 标签中。

<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：设置分页容器的基本样式，包括间距、圆角、浮动等。
page-item：每一个分页按钮的外层容器，用于控制按钮之间的间距。
page-link：按钮的文字部分，真正可点击的区域。
active：表示当前页的样式，通常用红色或蓝色高亮，让用户清楚知道自己在第几页。

💡 小贴士：active 类只加在当前页的 <li> 上，其他页保持普通状态。这是 Bootstrap4 分页的“状态标记”机制。

常用分页按钮类型

Bootstrap4 分页支持多种按钮类型，满足不同场景需求。下面介绍最常用的几种：

用于跳转到前一页或后一页，是最基础的导航按钮。

<ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#" aria-label="上一页">
      <span aria-hidden="true">&laquo;</span>
    </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="#" aria-label="下一页">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>
</ul>

aria-label="上一页"：为屏幕阅读器提供可访问性支持，提升无障碍体验。
« 和 »：HTML 实体，分别表示“左箭头”和“右箭头”，比用文字更直观。

数字页码按钮

数字按钮用于直接跳转到某一页，适合页码不多的情况。

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

每个数字按钮都对应一个 URL 或 JavaScript 事件。
当前页使用 active 类高亮，其余页保持默认。

省略号按钮（Ellipsis）

当页码太多时，比如有 100 页，全部显示会很拥挤。这时可以使用省略号按钮来压缩显示。

<li class="page-item disabled">
  <a class="page-link" href="#" aria-hidden="true">...</a>
</li>

disabled 类用于禁用按钮，表示不可点击。
aria-hidden="true" 告诉屏幕阅读器该元素无需朗读。

📌 实际项目中，通常只显示当前页前后几页，中间用省略号替代，比如：1 ... 5 6 7 ... 10

响应式与对齐控制

Bootstrap4 分页支持响应式设计，页面在手机、平板、桌面等设备上都能正常显示。

居中对齐

如果希望分页栏在页面中居中，只需给外层容器加 justify-content-center 类。

<ul class="pagination justify-content-center">
  <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>

justify-content-center 来自 Flexbox 布局，让分页按钮在容器中水平居中。

左对齐与右对齐

justify-content-start：左对齐（默认行为）
justify-content-end：右对齐

<ul class="pagination justify-content-end">
  <!-- 按钮内容 -->
</ul>

响应式缩放

在小屏幕上，分页按钮会自动缩小，避免文字溢出。这是 Bootstrap4 的默认行为，无需额外代码。

高级用法：动态生成分页

在真实项目中，分页数据通常来自后端 API。我们可以用 JavaScript 动态生成分页按钮。

示例：JavaScript 生成 10 页分页

<div class="container mt-4">
  <ul id="myPagination" class="pagination justify-content-center"></ul>
</div>

<script>
  // 假设总页数为 10
  const totalPages = 10;
  const currentPage = 3;

  const paginationContainer = document.getElementById('myPagination');
  paginationContainer.innerHTML = ''; // 清空之前的内容

  // 添加“上一页”按钮
  const prevLi = document.createElement('li');
  prevLi.className = 'page-item';
  if (currentPage === 1) {
    prevLi.classList.add('disabled'); // 第一页时禁用上一页
  }
  const prevLink = document.createElement('a');
  prevLink.href = '#';
  prevLink.className = 'page-link';
  prevLink.textContent = '上一页';
  prevLink.setAttribute('aria-label', '上一页');
  prevLi.appendChild(prevLink);
  paginationContainer.appendChild(prevLi);

  // 生成页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const li = document.createElement('li');
    li.className = 'page-item';
    if (i === currentPage) {
      li.classList.add('active'); // 当前页高亮
    }

    const link = document.createElement('a');
    link.href = '#';
    link.className = 'page-link';
    link.textContent = i;

    li.appendChild(link);
    paginationContainer.appendChild(li);
  }

  // 添加“下一页”按钮
  const nextLi = document.createElement('li');
  nextLi.className = 'page-item';
  if (currentPage === totalPages) {
    nextLi.classList.add('disabled'); // 最后一页时禁用下一页
  }
  const nextLink = document.createElement('a');
  nextLink.href = '#';
  nextLink.className = 'page-link';
  nextLink.textContent = '下一页';
  nextLink.setAttribute('aria-label', '下一页');
  nextLi.appendChild(nextLink);
  paginationContainer.appendChild(nextLi);
</script>

通过 document.getElementById 获取容器。
使用 innerHTML = '' 清空旧内容，避免重复添加。
disabled 类用于控制按钮是否可点击。
aria-label 提升可访问性，是专业开发中不可忽视的细节。

✅ 这段代码可直接复制到 HTML 文件中运行，适合初学者练习。

实际应用建议

1. 与后端配合使用

在真实项目中，分页通常通过 URL 参数控制，例如：

https://example.com/products?page=2

前端获取 page 参数，动态生成对应的分页按钮，并发送请求获取第 2 页数据。

2. 使用 `data-*` 属性传递页码

可以为按钮添加自定义属性，便于事件处理：

<a class="page-link" href="#" data-page="5">5</a>

JavaScript 中通过 dataset.page 获取值：

document.querySelectorAll('.page-link').forEach(link => {
  link.addEventListener('click', function (e) {
    e.preventDefault();
    const page = this.dataset.page;
    console.log('跳转到第', page, '页');
    // 发送请求或更新页面内容
  });
});

3. 避免页面刷新

使用 preventDefault() 阻止默认跳转行为，通过 AJAX 或 history.pushState 实现无刷新跳转。

总结

Bootstrap4 分页是前端开发中非常实用的一环。它不仅简化了分页组件的开发工作，还自带响应式、无障碍支持和美观的默认样式。

通过本文的学习，你应该掌握了：

Bootstrap4 分页的基本结构和核心类名
各种按钮类型（上一页、下一页、数字页码、省略号）的使用方法
如何通过 CSS 类控制对齐和响应式行为
如何用 JavaScript 动态生成分页按钮
实际项目中的最佳实践建议

无论你是初学者还是中级开发者，只要理解了这些核心概念，就能在项目中快速构建出专业级的分页功能。记住，好的 UI 不是靠“堆代码”实现的，而是靠“理解规则、合理使用工具”达成的。

Bootstrap4 分页，就是你构建现代化网页时，不可或缺的一块“拼图”。