Bootstrap 分页
Bootstrap 分页使用说明
Bootstrap 是一种流行的前端开发框架，提供了许多基础组件和工具，以简化网站的开发和设计，其中包括分页组件。
分页组件基础
分页组件是用于显示大型数据列表和帮助用户在列表中浏览的 Bootstrap 组件。该组件允许用户在列表中浏览不同的页面。
一个基本分页组件包含以下部分：
- 上一页按钮
- 下一页按钮
- 可选择的页码按钮
- 可选择的每页显示数量选项
- 显示当前页码和总页数的指示器
应用实例
下面是一个应用分页组件的示例，简单地显示一个数据表格的每一页数据：
<!-- 分页 -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
可以看到，分页组件的样式非常简洁，是由一组有序列表和链接构成的。在这个例子中，第一个链接通过 aria-label 属性来指示为“上一页”按钮；最后一个链接通过同样的属性来指示为“下一页”按钮。其余的链接则代表每个页面的编号。
在默认情况下，Bootstrap 分页组件最多显示 5 个页面按钮，当页面数超过 5 页时，用户可以单击“…”链接来显示其他页面。
分页组件大小
Bootstrap 分页组件提供了三个尺寸选项：default（默认）、small 和 large。
<!-- 默认大小 -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- 小号大小 -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- 大号大小 -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
分页组件颜色
Bootstrap 分页组件默认的颜色是灰色，但是可以通过以下类来应用不同的颜色。
<ul class="pagination"> <!-- 默认颜色 -->
<ul class="pagination pagination-primary"> <!-- 深蓝色 -->
<ul class="pagination pagination-success"> <!-- 绿色 -->
<ul class="pagination pagination-info"> <!-- 浅蓝色 -->
<ul class="pagination pagination-warning"> <!-- 橙色 -->
<ul class="pagination pagination-danger"> <!-- 红色 -->
总结
分页组件是网站常用的组件之一，可以快速帮助用户在大量数据中进行浏览。Bootstrap 分页组件提供了丰富的选项来满足不同需求，例如尺寸和颜色。开发者只需简单的引入这个组件，并选择所需的配置，就可以快速实现分页功能。