Bootstrap 分页（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，分页功能是处理大数据量展示的核心工具之一。无论是电商商品列表、博客文章列表，还是用户数据展示，分页都能有效提升用户体验并优化页面性能。而 Bootstrap 分页组件凭借其简洁的样式和灵活的扩展性，成为开发者快速实现分页功能的首选方案。

本文将从零开始，逐步讲解如何使用 Bootstrap 分页组件构建分页功能，并通过实际案例和代码示例，帮助开发者掌握分页的核心逻辑与进阶技巧。无论你是编程新手，还是希望优化现有分页方案的中级开发者，都能从中获得实用知识。

一、Bootstrap 分页组件基础

1.1 什么是 Bootstrap 分页？

Bootstrap 分页组件（Bootstrap Pagination）是 Bootstrap 框架中用于实现页面导航的预设样式组件。它通过 HTML 结构和 CSS 样式，提供了一套标准化的分页按钮和导航链接，开发者只需通过简单的类名组合即可快速搭建美观的分页界面。

1.2 核心 HTML 结构

Bootstrap 分页的核心结构基于 <nav> 和 <ul> 元素，结合预定义的类名实现。以下是基本结构示例：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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 <span class="sr-only">(current)</span></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>

1.3 关键类名解析

比喻：
可以将分页组件想象为图书馆的书架导航系统。.pagination 是整个书架的框架，.page-item 是每个书架层，.page-link 是具体的书籍标签，而 .disabled 和 .active 则是“不可借阅”和“当前借阅中”的标识牌。

二、分页组件的样式定制

2.1 基础样式的修改

Bootstrap 允许开发者通过覆盖默认 CSS 样式或添加自定义类名来修改分页外观。例如，调整页码间距或颜色：

.pagination {
  --bs-pagination-bg: #f8f9fa; /* 修改背景色 */
  --bs-pagination-color: #212529; /* 修改文字色 */
  --bs-pagination-border-width: 2px; /* 修改边框宽度 */
}

.pagination .page-item.active .page-link {
  background-color: #0d6efd; /* 修改当前页背景色 */
  border-color: #0d6efd;
}

2.2 响应式布局适配

通过结合 Bootstrap 的响应式工具类，可以确保分页在不同屏幕尺寸下保持良好显示。例如：

<div class="d-flex justify-content-center mb-3">
  <!-- 分页组件 -->
</div>

比喻：
自定义分页样式就像给房间装修。.pagination 是房间的整体结构，通过调整墙壁颜色（背景）、家具材质（边框）和灯光（文字颜色），可以打造出完全不同的风格。

三、动态分页与数据交互

3.1 分页与后端数据联动

分页组件的核心功能是切换数据页面。开发者需要通过 JavaScript 或后端逻辑实现页码点击时的数据加载。以下是一个简单的 JavaScript 示例：

document.querySelectorAll('.page-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const page = this.textContent.trim();
    // 发送请求获取对应页的数据
    fetchData(page);
  });
});

function fetchData(page) {
  // 模拟异步请求
  console.log(`正在加载第 ${page} 页数据...`);
  // 实际应用中可替换为 AJAX 或 Fetch API
}

3.2 结合后端分页参数

在真实项目中，通常需要与后端 API 协作。例如，发送包含 page 和 per_page 参数的请求：

async function fetchData(page) {
  const response = await fetch(`/api/items?page=${page}&per_page=10`);
  const data = await response.json();
  renderData(data.items);
}

案例场景：
假设你正在开发一个博客系统，每页显示 5 篇文章。当用户点击分页中的“3”时，前端发送请求 /api/posts?page=3，后端返回第三页的文章列表，前端更新页面内容即可。

四、进阶技巧与常见问题

4.1 无限滚动与分页的结合

对于追求现代交互体验的场景，可以结合分页和无限滚动（Infinite Scroll）。例如：

// 监听滚动事件，当滚动到底部时自动加载下一页
window.addEventListener('scroll', () => {
  if (nearBottomOfPage()) {
    const nextPage = parseInt(currentPage) + 1;
    fetchData(nextPage);
  }
});

function nearBottomOfPage() {
  return window.innerHeight + window.scrollY >= document.body.offsetHeight - 500;
}

4.2 移动端适配优化

在移动端设备上，分页按钮可能因屏幕过窄而重叠。可通过以下方式优化：

@media (max-width: 768px) {
  .page-item {
    flex: 0 0 calc(20% - 0.5rem); /* 自适应分配空间 */
  }
}

4.3 性能优化建议

• 预加载关键页码：对“上一页”“下一页”等高频点击项进行预加载。
• 懒加载数据：仅在用户点击页码时请求对应数据，而非一次性加载所有页面。
• 缓存数据：使用浏览器缓存或本地存储减少重复请求。

问题解决示例：
如果分页按钮点击无效，检查以下几点：

1. 确保 href="#" 的链接未被路由框架（如 Vue Router）拦截。
2. 确认事件监听函数是否正确绑定。
3. 检查后端接口返回的数据格式是否符合预期。

五、实战案例：构建一个完整的分页系统

5.1 案例需求

假设需要为一个电商商品列表实现分页功能，要求：

• 每页显示 10 件商品；
• 支持“上一页”“下一页”和直接跳转到指定页码；
• 当前页高亮显示。

5.2 实现步骤

步骤 1：HTML 结构

<div class="container">
  <div class="row" id="product-list"></div>
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center" id="pagination"></ul>
  </nav>
</div>

步骤 2：JavaScript 数据处理

let currentPage = 1;
const itemsPerPage = 10;

// 模拟商品数据
const products = Array.from({ length: 100 }, (_, i) => ({
  id: i + 1,
  title: `商品 ${i + 1}`,
  price: `$${(Math.random() * 100).toFixed(2)}`
}));

// 渲染商品列表
function renderProducts(products) {
  const container = document.getElementById('product-list');
  container.innerHTML = products.map(p => `
    <div class="col-md-3 mb-4">
      <div class="card">
        <div class="card-body">
          <h5>${p.title}</h5>
          <p>价格：${p.price}</p>
        </div>
      </div>
    </div>
  `).join('');
}

// 生成分页按钮
function generatePagination(totalPages) {
  const pagination = document.getElementById('pagination');
  pagination.innerHTML = `
    <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
      <a class="page-link" href="#" onclick="goToPage(${currentPage - 1})">上一页</a>
    </li>
    ${generatePageNumbers(totalPages)}
    <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
      <a class="page-link" href="#" onclick="goToPage(${currentPage + 1})">下一页</a>
    </li>
  `;
}

// 生成页码按钮
function generatePageNumbers(totalPages) {
  let html = '';
  for (let i = 1; i <= totalPages; i++) {
    html += `
      <li class="page-item ${i === currentPage ? 'active' : ''}">
        <a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>
      </li>
    `;
  }
  return html;
}

// 分页逻辑
function goToPage(page) {
  if (page < 1 || page > totalPages) return;
  currentPage = page;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentProducts = products.slice(startIndex, endIndex);
  renderProducts(currentProducts);
  generatePagination(totalPages);
}

// 计算总页数
const totalPages = Math.ceil(products.length / itemsPerPage);
generatePagination(totalPages);
goToPage(1);

5.3 效果演示

通过上述代码，用户可点击分页按钮切换商品列表，并实时更新当前页显示。代码逻辑清晰，适合作为分页功能的入门实践案例。

结论

Bootstrap 分页组件凭借其易用性和可扩展性，成为 Web 开发中不可或缺的工具。通过本文的讲解，开发者可以掌握从基础结构搭建到动态数据交互的完整流程，并通过实际案例理解分页在真实场景中的应用。

无论是优化现有项目的分页逻辑，还是从零开始设计分页系统，理解分页组件的底层原理和交互逻辑都是关键。建议开发者在实践中结合项目需求，灵活调整样式和功能，以实现最佳的用户体验。

如需进一步学习，可参考 Bootstrap 官方文档中的分页组件 章节，或探索第三方插件如 Bootstrap Pagination.js 以简化开发流程。