Bootstrap 5学习教程，从入门到精通， Bootstrap 5 分页（Pagination）知识点及案例代码（13）
Bootstrap 5 分页（Pagination）知识点及案例代码
Bootstrap 5 提供了强大的分页组件，帮助开发者轻松实现分页功能。以下是关于 Bootstrap 5 分页的详细语法知识点以及一个完整的案例代码，包含详细注释，帮助初学者快速上手。
一、分页组件概述
分页组件用于在内容较多时进行分页显示，提升用户体验。Bootstrap 5 的分页组件包含多种样式和功能，如普通分页、带有图标的分页、禁用和激活状态等。
二、分页组件的语法知识点
1. 基本结构
分页组件使用 <ul> 元素，并添加 .pagination 类。每个分页项使用 <li> 元素，并添加 .page-item 类。链接使用 <a> 元素，并添加 .page-link 类。
<ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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="#">Next</a></li>
</ul>
2. 激活状态
使用 .active 类来标识当前页。
<li class="page-item active"><a class="page-link" href="#">1</a></li>
3. 禁用状态
使用 .disabled 类来禁用某个分页项。
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
4. 大小调整
通过添加 .pagination-lg 或 .pagination-sm 类来调整分页的大小。
<ul class="pagination pagination-lg"><!-- 分页项 -->
</ul>
5. 对齐方式
使用 Flexbox 工具类来调整分页的对齐方式，如居中、右对齐等。
<ul class="pagination justify-content-center"><!-- 分页项 -->
</ul>
6. 分页项的图标
可以在分页链接中添加图标，例如使用 Font Awesome 图标。
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
7. 响应式分页
结合 Bootstrap 的栅格系统，可以创建响应式分页。
<div class="d-flex justify-content-center"><ul class="pagination"><!-- 分页项 --></ul>
</div>
三、案例代码
以下是一个完整的 Bootstrap 5 分页示例，包含详细注释，展示如何实现基本的分页功能、激活和禁用状态、调整大小以及对齐方式。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 分页示例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定义样式（可选） */.pagination-example {margin: 20px 0;}</style>
</head>
<body><div class="container"><h2 class="mt-5">Bootstrap 5 分页示例</h2><!-- 基本分页 --><h4>1. 基本分页</h4><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><!-- 激活和禁用状态 --><h4>2. 激活和禁用状态</h4><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">Previous</a></li><li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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="#">Next</a></li></ul><!-- 大小调整 --><h4>3. 大小调整</h4><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br><ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><!-- 对齐方式 --><h4>4. 对齐方式</h4><ul class="pagination justify-content-center"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br><ul class="pagination justify-content-end"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><!-- 分页项的图标 --><h4>5. 分页项的图标</h4><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><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><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul><!-- 响应式分页 --><h4>6. 响应式分页</h4><div class="d-flex justify-content-center"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></div>
</div><!-- 引入 Bootstrap 5 JS（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
代码说明
-
引入 Bootstrap 5 CSS 和 JS
<!-- 引入 Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 引入 Bootstrap 5 JS（可选） --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保分页组件的样式和功能正常。
-
基本分页
<ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><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><li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>创建基本的分页结构，包含“Previous”和“Next”链接，以及页码。
-
激活和禁用状态
<ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">Previous</a></li><li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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="#">Next</a></li> </ul>.disabled类用于禁用“Previous”链接。.active类用于标识当前页“1”，并使用<span class="sr-only">(current)</span>提供辅助功能支持。
-
大小调整
<ul class="pagination pagination-lg"><!-- 分页项 --> </ul> <br> <ul class="pagination pagination-sm"><!-- 分页项 --> </ul>.pagination-lg类用于增大分页尺寸。.pagination-sm类用于减小分页尺寸。
-
对齐方式
<ul class="pagination justify-content-center"><!-- 分页项 --> </ul> <br> <ul class="pagination justify-content-end"><!-- 分页项 --> </ul>.justify-content-center类用于将分页居中对齐。.justify-content-end类用于将分页右对齐。
-
分页项的图标
<ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><!-- 其他分页项 --><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul>使用 Font Awesome 图标（需引入 Font Awesome）或者使用 Bootstrap 内置的符号（如
«和»）来添加图标。 -
响应式分页
<div class="d-flex justify-content-center"><ul class="pagination"><!-- 分页项 --></ul> </div>使用 Flexbox 工具类
.d-flex和.justify-content-center来实现响应式居中对齐。
四、扩展功能
1. 使用图标库
如果需要使用图标库（如 Font Awesome），可以在分页链接中添加图标。例如：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="fas fa-arrow-left"></i></a></li><!-- 其他分页项 --><li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="fas fa-arrow-right"></i></a></li>
</ul>
2. 动态分页
在实际应用中，分页通常需要与后端数据结合，实现动态分页。以下是一个简单的示例，展示如何使用 JavaScript 动态生成分页项：
<!-- 示例 HTML -->
<div id="pagination-container"></div><!-- 示例 JavaScript -->
<script>const totalPages = 10;const currentPage = 3;const container = document.getElementById('pagination-container');const ul = document.createElement('ul');ul.className = 'pagination';for (let i = 1; i <= totalPages; i++) {const li = document.createElement('li');li.className = 'page-item';if (i === currentPage) {li.classList.add('active');}const a = document.createElement('a');a.className = 'page-link';a.href = '#';a.textContent = i;li.appendChild(a);ul.appendChild(li);}container.appendChild(ul);
</script>
3. 使用 JavaScript 事件处理
可以通过 JavaScript 为分页链接添加事件处理，实现页面跳转或数据加载。例如：
<script>document.querySelectorAll('.page-link').forEach(function(element) {element.addEventListener('click', function(event) {event.preventDefault();const page = this.textContent;// 在这里添加跳转或数据加载逻辑console.log('当前页:', page);});});
</script>
五.案例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 分页组件示例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container mt-5"><h2 class="mb-4">Bootstrap 5 分页组件示例</h2><!-- 1. 基本分页示例 --><section class="mb-5"><h4>1. 基本分页</h4><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一页</a></li><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 active" aria-current="page"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></nav></section><!-- 2. 禁用和活动状态 --><section class="mb-5"><h4>2. 禁用和活动状态</h4><nav aria-label="Disabled and active states"><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><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></section><!-- 3. 分页对齐方式 --><section class="mb-5"><h4>3. 分页对齐方式</h4><h5>左对齐（默认）</h5><nav aria-label="Left-aligned pagination"><ul class="pagination"><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></ul></nav><h5 class="mt-3">居中对齐</h5><nav aria-label="Centered pagination"><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><li class="page-item"><a class="page-link" href="#">3</a></li></ul></nav><h5 class="mt-3">右对齐</h5><nav aria-label="Right-aligned pagination"><ul class="pagination justify-content-end"><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></ul></nav></section><!-- 4. 分页尺寸 --><section class="mb-5"><h4>4. 分页尺寸</h4><h5>大尺寸分页 (.pagination-lg)</h5><nav aria-label="Large pagination"><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><li class="page-item"><a class="page-link" href="#">3</a></li></ul></nav><h5 class="mt-3">默认尺寸</h5><nav aria-label="Default pagination"><ul class="pagination"><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></ul></nav><h5 class="mt-3">小尺寸分页 (.pagination-sm)</h5><nav aria-label="Small pagination"><ul class="pagination pagination-sm"><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></ul></nav></section><!-- 5. 带图标的分页 --><section class="mb-5"><h4>5. 带图标的分页</h4><nav aria-label="Page navigation with icons"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="First"><span aria-hidden="true">««</span></a></li><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><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 active"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li><li class="page-item"><a class="page-link" href="#" aria-label="Last"><span aria-hidden="true">»»</span></a></li></ul></nav></section><!-- 6. 带省略号的分页（长列表） --><section class="mb-5"><h4>6. 带省略号的分页（长列表）</h4><nav aria-label="Page navigation with ellipsis"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><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="#">5</a></li><li class="page-item active"><a class="page-link" href="#">6</a></li><li class="page-item"><a class="page-link" href="#">7</a></li><li class="page-item disabled"><span class="page-link">...</span></li><li class="page-item"><a class="page-link" href="#">12</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav></section></div><!-- 引入 Bootstrap 5 JS 及其依赖 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
代码说明
-
基本结构：每个分页组件都包裹在
<nav>元素中，并添加了aria-label以提高可访问性。 -
分页项：每个分页项使用
.page-item类，链接使用.page-link类。 -
状态类：
.active- 高亮显示当前页.disabled- 禁用分页项（不可点击）
-
对齐方式：
- 使用
.justify-content-center或.justify-content-end实现居中或右对齐
- 使用
-
尺寸控制：
.pagination-lg- 大尺寸.pagination-sm- 小尺寸
-
图标分页：
- 使用 HTML 实体（如
«）添加图标 - 添加
aria-label描述图标含义
- 使用 HTML 实体（如
-
长列表分页：
- 使用
.disabled类和省略号表示隐藏的页码
- 使用
六、总结
Bootstrap 5 提供了灵活且易于使用的分页组件，能够满足各种分页需求。通过掌握上述语法知识点，并结合实际案例进行练习，初学者可以快速实现功能丰富的分页功能。