Bootstrap - 分页：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap分页的世界。作为你友好的邻居电脑老师，我很兴奋能引导你进行这次旅行。如果你是编程新手，不用担心——我们将从基础开始，逐步学习。在本教程结束时，你将成为分页高手！

Bootstrap - Pagination

什么是分页？

在我们跳入Bootstrap之前，先来了解一下分页是什么。想象你在阅读一本长篇小说。而不是把所有内容都塞在一张页面上，它被分成易于管理的部分——这就是数字世界的分页。它帮助将大量内容组织在多个页面中，使用户更容易导航。

Bootstrap分页：基础知识

Bootstrap，我们可靠的前端工具包，提供了一种简单而优雅的方式来创建分页。让我们从基础开始。

简单分页

要在Bootstrap中创建基本的分页，我们使用<nav>和<ul>元素以及特定的类。以下是一个简单示例：

<nav aria-label="Page navigation">
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
</nav>

让我们分解一下：

<nav>元素用于包裹我们的分页，以达到语义目的。
<ul>有pagination类，它应用Bootstrap的分页样式。
每个<li>代表一个页面，并具有page-item类。
每个<li>内的<a>标签具有page-link类，用于设置可点击部分的样式。

使用图标

想让你的分页看起来更酷吗？让我们添加一些图标！Bootstrap与图标库（如Font Awesome）配合得很好。以下是如何在你的分页中使用图标：

<nav aria-label="Page navigation">
<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>
</nav>

在这个示例中，我们使用了«和»来创建左和右的箭头图标。这些是HTML实体，分别渲染为«和raquo。

分页状态：禁用和激活

有时，你可能想要突出显示当前页面或禁用某些导航选项。Bootstrap使得这很容易，通过使用active和disabled类。

<nav aria-label="Page navigation">
<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>

在这里，"上一页"链接被禁用（你不能点击它），而第2页被标记为激活（当前选中）。

大小调整

就像Goldilocks一样，有时你需要你的分页大小恰到好处。Bootstrap提供了不同的大小选项：

<!-- 大型分页 -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>

<!-- 小型分页 -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>

添加pagination-lg来创建大型分页，或者添加pagination-sm来创建小型分页。就像在你喜欢的咖啡店选择大杯或小杯一样！

对齐

默认情况下，分页与左边对齐。但如果你想要居中或将其推到右边呢？Bootstrap可以做到：

<!-- 居中对齐 -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<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"><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>

<!-- 右对齐 -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<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"><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>

使用justify-content-center来居中分页，或使用justify-content-end来右对齐分页。

使用Flex工具对齐

为了更灵活地控制分页对齐，你可以使用Bootstrap的Flex工具：

<nav aria-label="Page navigation">
<div class="d-flex justify-content-center">
<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"><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>
</div>
</nav>

在这里，我们将分页包裹在一个带有d-flex和justify-content-center类的<div>中。这为你提供了更多的定位灵活性。

结论

就这样，伙计们！你刚刚完成了一次Bootstrap分页的精彩之旅。从基本结构到花哨的对齐，你现在有了创建美丽、功能性的分页工具。记住，熟能生巧，所以不要害怕用这些示例进行实验。

以下是我们所涵盖的类的快速参考表：

类	目的
pagination	创建基本的分页结构
page-item	设置每个分页项的样式
page-link	设置每个项可点击部分的样式
active	突出显示当前页面
disabled	禁用分页项
pagination-lg	创建大型分页
pagination-sm	创建小型分页
justify-content-center	居中分页
justify-content-end	右对齐分页
d-flex	创建Flex容器

快乐编码，愿你的页面总是完美分页！

Credits: Image by storyset