Bootstrap 5学习教程，从入门到精通， Bootstrap 5 分页（Pagination）知识点及案例代码（13）
Bootstrap 5 分页（Pagination）知识点及案例代码
Bootstrap 5 提供了强大的分页组件，帮助开发者轻松实现分页功能。以下是关于 Bootstrap 5 分页的详细语法知识点以及一个完整的案例代码，包含详细注释，帮助初学者快速上手。
一、分页组件概述
分页组件用于在内容较多时进行分页显示，提升用户体验。Bootstrap 5 的分页组件包含多种样式和功能，如普通分页、带有图标的分页、禁用和激活状态等。
二、分页组件的语法知识点
1. 基本结构
分页组件使用 .pagination 类。每个分页项使用 元素，并添加 .page-item 类。链接使用 元素，并添加 .page-link 类。
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
2. 激活状态
使用 .active 类来标识当前页。
<li class="page-item active"><a class="page-link" href="#">1a>li>
3. 禁用状态
使用 .disabled 类来禁用某个分页项。
<li class="page-item disabled"><a class="page-link" href="#">Previousa>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>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
<h4>2. 激活和禁用状态h4>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previousa>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="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
<h4>3. 大小调整h4>
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
<br>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
<h4>4. 对齐方式h4>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
<br>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>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="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
代码说明
-
引入 Bootstrap 5 CSS 和 JS
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保分页组件的样式和功能正常。
-
基本分页
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previousa>li> <li class="page-item"><a class="page-link" href="#">1a>li> <li class="page-item"><a class="page-link" href="#">2a>li> <li class="page-item"><a class="page-link" href="#">3a>li> <li class="page-item"><a class="page-link" href="#">Nexta>li> ul>创建基本的分页结构，包含“Previous”和“Next”链接，以及页码。
-
激活和禁用状态
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Previousa>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="#">2a>li> <li class="page-item"><a class="page-link" href="#">3a>li> <li class="page-item"><a class="page-link" href="#">Nexta>li> ul>.disabled类用于禁用“Previous”链接。.active类用于标识当前页“1”，并使用(current)提供辅助功能支持。
-
大小调整
<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 动态生成分页项：
<div id="pagination-container">div>
<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>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Bootstrap 5 分页组件示例h2>
<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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">4a>li>
<li class="page-item"><a class="page-link" href="#">5a>li>
<li class="page-item"><a class="page-link" href="#">下一页a>li>
ul>
nav>
section>
<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="#">1a>li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2a>
li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item">
<a class="page-link" href="#">下一页a>
li>
ul>
nav>
section>
<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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
ul>
nav>
section>
<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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
ul>
nav>
section>
<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="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item active"><a class="page-link" href="#">3a>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>
<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="#">1a>li>
<li class="page-item disabled">
<span class="page-link">...span>
li>
<li class="page-item"><a class="page-link" href="#">5a>li>
<li class="page-item active"><a class="page-link" href="#">6a>li>
<li class="page-item"><a class="page-link" href="#">7a>li>
<li class="page-item disabled">
<span class="page-link">...span>
li>
<li class="page-item"><a class="page-link" href="#">12a>li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
section>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
代码说明
-
基本结构：每个分页组件都包裹在
元素中，并添加了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 提供了灵活且易于使用的分页组件，能够满足各种分页需求。通过掌握上述语法知识点，并结合实际案例进行练习，初学者可以快速实现功能丰富的分页功能。