Bootstrap5 分页（保姆级教程）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，分页功能是数据展示的核心组件之一。无论是博客文章列表、电商商品展示还是用户管理界面，合理设计的分页能够提升用户体验，同时优化服务器性能。Bootstrap5 作为主流的前端框架，其内置的分页组件提供了简洁且高度可定制的解决方案。本文将从基础用法到高级技巧，结合实际案例，手把手教你掌握 Bootstrap5 分页的开发技巧。

一、Bootstrap5 分页组件基础

1.1 分页组件的核心结构

Bootstrap5 的分页组件基于 HTML 的 <nav> 和 <ul> 标签构建。核心类名包括 .pagination（分页容器）和 .page-item（页码或按钮容器）。以下是一个最简示例：

<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="#" aria-current="page">2</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>

关键点解析：

• .disabled 类用于禁用前一页按钮，配合 aria-disabled="true" 提升可访问性。
• .active 类高亮当前页码，需与 aria-current="page" 结合使用。
• 每个页码或按钮包裹在 <li class="page-item"> 中，确保样式一致性。

1.2 布局与对齐方式

通过添加修饰类，可快速调整分页的布局方向：
| 类名 | 效果描述 | |---------------------|----------------------------| | .pagination-sm | 小尺寸分页（适合移动端） | | .pagination-lg | 大尺寸分页（适合桌面端） | | .justify-content-center | 居中对齐分页按钮 | | .justify-content-end | 右对齐分页按钮 |

示例代码：

<ul class="pagination justify-content-center pagination-lg">
  <!-- 页码内容 -->
</ul>

二、自定义分页样式

2.1 颜色主题调整

Bootstrap5 的分页支持直接使用预定义的颜色变体，如 .bg-primary 或 .border-secondary，但更灵活的方式是通过覆盖 CSS 变量：

/* 定义全局分页样式 */
.pagination {
  --bs-pagination-color: #333;
  --bs-pagination-bg: #f8f9fa;
  --bs-pagination-border: 1px solid #dee2e6;
}

/* 激活页码颜色 */
.pagination .page-item.active .page-link {
  background-color: #0d6efd; /* Bootstrap 主蓝色 */
  border-color: #0d6efd;
}

比喻解释：
这就像为分页组件“换衣服”，通过 CSS 变量可快速切换整体配色，而无需修改 HTML 结构。

2.2 自定义按钮形状

若需圆角或阴影效果，可添加自定义类：

<ul class="pagination rounded-pill shadow-sm">
  <!-- 页码内容 -->
</ul>

效果说明：

• rounded-pill 使按钮呈现椭圆形边缘。
• shadow-sm 添加轻微阴影，增强立体感。

三、动态分页实现

3.1 基于 JavaScript 的交互

分页的核心逻辑是动态加载数据。以下是一个结合 JavaScript 的简易示例，假设每页显示 10 条数据：

// 模拟数据源
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

// 初始化分页参数
let currentPage = 1;
const itemsPerPage = 10;

function updatePagination() {
  const totalPages = Math.ceil(data.length / itemsPerPage);
  const $pageLinks = document.querySelectorAll('.page-item');
  
  // 清除旧页码
  $pageLinks.forEach(item => item.remove());
  
  // 生成新页码
  for (let i = 1; i <= totalPages; i++) {
    const $li = document.createElement('li');
    $li.className = 'page-item ' + (i === currentPage ? 'active' : '');
    $li.innerHTML = `
      <a class="page-link" href="#">${i}</a>
    `;
    document.querySelector('.pagination').append($li);
  }
}

// 监听页码点击事件
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('page-link')) {
    currentPage = parseInt(e.target.textContent);
    updatePagination();
    // 这里可添加数据加载逻辑
  }
});

// 初始渲染
updatePagination();

关键步骤：

1. 根据数据总量计算总页数。
2. 动态生成页码元素并绑定点击事件。
3. 通过类名切换实现高亮效果。

3.2 与后端 API 集成

在真实项目中，通常通过 AJAX 请求分页数据。以下是一个简化示例：

async function fetchData(page) {
  const response = await fetch(`/api/data?page=${page}&size=10`);
  const result = await response.json();
  // 渲染数据到页面
  renderData(result.items);
  updatePagination(result.totalPages);
}

// 分页按钮点击事件
document.querySelector('.pagination').addEventListener('click', (e) => {
  if (e.target.classList.contains('page-link')) {
    const targetPage = parseInt(e.target.textContent);
    fetchData(targetPage);
  }
});

四、实战案例：博客文章分页

4.1 基础结构搭建

假设博客列表每页显示 5 篇文章，HTML 结构如下：

<!-- 博客列表容器 -->
<div class="container my-5">
  <div class="row">
    <!-- 文章卡片循环插入此处 -->
  </div>
  <!-- 分页组件 -->
  <nav aria-label="Blog pagination">
    <ul class="pagination justify-content-center mt-4">
      <!-- 动态生成的页码 -->
    </ul>
  </nav>
</div>

4.2 结合数据渲染

通过 JavaScript 实现数据分页加载：

const blogData = [
  { id: 1, title: '如何学习前端', content: '...' },
  // ... 其他文章数据
];

let currentPageBlog = 1;
const itemsPerPageBlog = 5;

function renderBlogPage(page) {
  const start = (page - 1) * itemsPerPageBlog;
  const end = page * itemsPerPageBlog;
  const currentItems = blogData.slice(start, end);
  
  // 渲染文章卡片
  const $blogList = document.querySelector('.row');
  $blogList.innerHTML = currentItems.map(item => `
    <div class="col-md-4">
      <div class="card mb-4">
        <div class="card-body">
          <h5 class="card-title">${item.title}</h5>
          <p class="card-text">${item.content}</p>
        </div>
      </div>
    </div>
  `).join('');
}

// 初始化分页
function updateBlogPagination(totalPages) {
  const $pagination = document.querySelector('.pagination');
  $pagination.innerHTML = '';
  
  for (let i = 1; i <= totalPages; i++) {
    const isActive = i === currentPageBlog;
    const $pageItem = document.createElement('li');
    $pageItem.className = `page-item ${isActive ? 'active' : ''}`;
    $pageItem.innerHTML = `
      <a class="page-link" href="#">${i}</a>
    `;
    $pagination.appendChild($pageItem);
  }
}

// 监听分页点击
document.querySelector('.pagination').addEventListener('click', (e) => {
  if (e.target.classList.contains('page-link')) {
    currentPageBlog = parseInt(e.target.textContent);
    renderBlogPage(currentPageBlog);
  }
});

// 初始渲染
renderBlogPage(currentPageBlog);
updateBlogPagination(Math.ceil(blogData.length / itemsPerPageBlog));

效果演示：
用户点击页码时，仅加载当前页的文章数据，避免一次性加载全部内容，提升性能。

五、高级技巧与注意事项

5.1 响应式分页设计

通过 Bootstrap 的网格系统，可让分页在不同屏幕尺寸下自适应：

<!-- 在小屏幕设备上居中显示 -->
<ul class="pagination d-flex justify-content-center">
  <!-- 页码内容 -->
</ul>

5.2 SEO 优化

为分页链接添加语义化属性，提升搜索引擎友好度：

<li class="page-item">
  <a class="page-link" href="/blog?page=2" aria-label="Next page">
    Next <span class="visually-hidden">(page 2)</span>
  </a>
</li>

5.3 性能优化建议

• 懒加载数据：仅在用户点击页码时加载对应数据，而非预加载全部页面。
• 缓存机制：对已加载的页码数据进行本地存储，减少重复请求。

六、常见问题解答

Q1：如何禁用特定页码？

在 <li> 标签中添加 .disabled 类，并设置 tabindex="-1" 和 aria-disabled="true"：

<li class="page-item disabled">
  <a class="page-link" tabindex="-1" aria-disabled="true">...</a>
</li>

Q2：如何实现省略号（...）分页？

当页码过多时，可动态生成省略号页码：

if (i > currentPage + 2 && i < totalPages - 2) {
  // 插入省略号页码
  const $ellipsis = document.createElement('li');
  $ellipsis.className = 'page-item disabled';
  $ellipsis.innerHTML = '<span class="page-link">...</span>';
  $pagination.appendChild($ellipsis);
}

结论

通过本文的讲解，你已掌握了从基础到高级的 Bootstrap5 分页实现方法。无论是快速搭建静态分页，还是结合动态数据开发复杂场景，都可以通过组合 Bootstrap 的类名和自定义逻辑完成。记住，分页不仅是功能实现，更是用户体验的关键环节——合理的交互设计能让用户更高效地浏览内容，同时降低服务器负载。现在，不妨动手实践，为你的项目添加优雅的分页功能吧！

关键词自然布局：Bootstrap5 分页、动态分页、分页样式、分页交互、分页组件