分页是一种常见的用户界面组件，用于将大量内容分成多个页面，以提高用户体验。Bootstrap 5 提供了一套简洁而功能强大的分页样式和组件，帮助开发者快速实现分页功能。
基础分页
基础的分页样式非常简单，只需要为 <ul> 元素添加 .pagination 类即可。此外，每个分页项都应使用带有 .page-item 类的 <li> 元素包裹，并且每个链接都应该使用带有 .page-link 类的 <a> 元素。
-- -------------------- ---- -------
---- ---------------- ---------- ---------
--- -------------------
--- -------------------- ----------------- --------------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------禁用状态
分页中的某些项可能需要被禁用，例如当用户处于第一页时，“上一页”按钮就应该被禁用。可以通过给 <li> 元素添加 .disabled 类来实现这一效果。
-- -------------------- ---- -------
---- ---------------- ---------- ---------
--- -------------------
--- ---------------- ------------ ----------------- -------- -------------------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------活动状态
当前页的分页项应该显示为活动状态，以提示用户他们当前所在的页面。这可以通过给 <li> 元素添加 .active 类来实现。
-- -------------------- ---- -------
---- ---------------- ---------- ---------
--- -------------------
--- -------------------- ----------------- --------------------------
--- -------------------- ----------------- -------------------
--- ---------------- ---------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------各种尺寸
除了默认的分页样式外，Bootstrap 5 还提供了不同尺寸的分页样式。通过给 <ul> 元素添加 .pagination-lg 或 .pagination-sm 类，可以改变分页组件的大小。
-- -------------------- ---- -------
---- ---------------- ---------- ---------
--- ----------------- ---------------
--- -------------------- ----------------- --------------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------
---- ---------------- ---------- ---------
--- ----------------- ---------------
--- -------------------- ----------------- --------------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------自定义分页样式
为了满足更复杂的需求，你可以自定义分页样式。这可以通过覆盖默认的 CSS 样式或使用自定义类来实现。例如，如果你想给所有的分页项添加一个背景颜色，你可以这样做：
.custom-pagination .page-link {
background-color: #f0f0f0;
}
.custom-pagination .page-item.active .page-link {
background-color: #4CAF50;
border-color: #4CAF50;
}然后在 HTML 中应用这个自定义类：
-- -------------------- ---- -------
---- ---------------- ---------- ---------
--- ----------------- -------------------
--- -------------------- ----------------- --------------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- -------------------
--- -------------------- ----------------- ----------------------
-----
------通过这些基本的分页样式和一些简单的定制，你可以轻松地为你的项目添加用户友好的分页功能。希望这些示例能帮助你更好地理解和使用 Bootstrap 5 的分页组件。