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">&laquo;</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">&laquo;</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">&raquo;</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">&laquo;</span></a></li><!-- 其他分页项 --><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</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">&laquo;&laquo;</span></a></li><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&raquo;</span></a></li><li class="page-item"><a class="page-link" href="#" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</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">&laquo;</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">&raquo;</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>