<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Pagination Example</title>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Pagination Example</h1>
<!-- 分页 -->
<nav aria-label="Page navigation">
<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>
</nav>
</div>
<!-- 引入 Bootstrap JS 和 Popper.js（注意：需要先引入 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
在这个例子中，我们使用了 Bootstrap 的分页组件，包括了 pagination 类、page-item 类、page-link 类等。分页中的每个页面链接都包含在 page-item 类中，而链接样式则使用 page-link 类定义。
具体的分页结构可以根据项目需求进行更改，例如增加更多的页面链接、定制分页样式等。Bootstrap 的分页组件还支持禁用、激活状态、响应式设计等功能，详细信息可以参考 Bootstrap 文档。
转载请注明出处：http://www.zyzy.cn/article/detail/12617/Bootstrap