Bootstrap5是一款常用的前端框架，其中有一个非常实用的分页导航组件——Pagination。在本文中，我们将详细介绍Bootstrap5怎么使用Pagination组件。
一、Pagination组件介绍
Pagination组件用于展示数据分页，例如在一个商品列表页中，当列表长度超过一页时，我们就需要用到Pagination组件来分页展示。在Bootstrap5中，Pagination组件提供了多种样式和方便的配置选项。
二、Pagination组件基本用法
使用Pagination组件非常简单，只需要按照以下步骤：
1.引入Pagination组件的CSS和JS文件
在
标签中引入Bootstrap5的CSS文件和Pagination组件的CSS文件：
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/esm/popper.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/esm/popper-utils.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/esm/popper-modifiers.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap.bundle.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap-utilities.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap-utilities.rtl.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap-utilities.colors.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap-utilities.colors.rtl.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap.esm.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/esm/popper-modifiers.min.css">
<!-- 引入Pagination的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap.min.css">
<title>Bootstrap 5 Pagination</title>
</head>
在
标签的底部引入Bootstrap5的JS文件和Pagination组件的JS文件：
<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<!-- 引入jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入Pagination的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/js/bootstrap.bundle.min.js"></script>
2.在代码中添加Pagination组件
在需要添加分页导航的地方添加以下代码：
<nav aria-label="Page navigation example">
<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>
</nav>
上述代码中，
上述代码实现了一个简单的分页导航，其中“Previous”和“Next”用来实现上一页和下一页。此时，我们只需要在代码中修改数字，就可以实现不同的页码。
三、Pagination组件高级用法
1. 切换颜色
Bootstrap5提供了多种颜色样式，我们可以通过修改类名来改变Pagination组件的颜色。例如，我们将Pagination组件的类名改为pagination pagination-danger，就可以将颜色修改为红色。
<nav aria-label="Page navigation example">
<ul class="pagination pagination-danger">
<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>
</nav>
2.自定义页面范围
除了默认的页面范围外，我们还可以自定义显示的页面范围。在Pagination组件中，我们可以通过设置当前页码和总页数来显示页面范围。
<nav aria-label="Page navigation example">
<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 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="#">Next</a></li>
</ul>
</nav>
上述代码实现了一个自定义页面范围的分页导航，当前页码为3，总共有5页数据。此时，我们将当前页的样式设置为active，同时增加一个aria-current属性，用来标记当前页码。
3. 分页导航配合表格使用
在数据量较大的表格中，我们通常会采用分页展示的方式，此时我们可以将Pagination组件与表格控件一起使用。
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation example">
<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 active" aria-current="page"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
上述代码展示了表格和Pagination组件的组合使用方法，此时分页导航仅供演示，因此只有三页数据。
四、总结
Pagination组件是Bootstrap5中的一个非常实用的组件，它可以帮助我们实现数据分页展示。本文介绍了Pagination组件的基本使用方法、高级用法，以及Pagination组件和表格控件的组合使用方法。掌握了这些知识，相信大家能够灵活运用Pagination组件，为网站的开发提供便利。