分页（Pagination）

优质

小牛编辑

124浏览

2023-12-01

本章讨论Bootstrap支持的分页功能。分页，无序列表由Bootstrap处理，就像许多其他界面元素一样。

分页(Pagination)

下表列出了Bootstrap提供的用于处理分页的类。

类描述示例代码

.pagination

添加此类以获取页面上的分页。

类	描述	示例代码
.pagination	添加此类以获取页面上的分页。	`<ul class = "pagination"> <li><a href = "#">«</a></li> <li><a href = "#">1</a></li> ....... </ul>`
.disabled, .active	您可以使用.disabled为.disabled点击的链接自定义链接，使用.disabled指示当前页面。	`<ul class = "pagination"> <li class = "disabled"><a href = "#">«</a></li> <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li> ....... </ul>`
.pagination-lg, .pagination-sm	使用这些类可以获得不同大小的项目。	`<ul class = "pagination pagination-lg">...</ul> <ul class = "pagination">...</ul> <ul class = "pagination pagination-sm">...</ul>`

<ul class = "pagination">
   <li><a href = "#">«</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

.disabled, .active

您可以使用.disabled为.disabled点击的链接自定义链接，使用.disabled指示当前页面。

<ul class = "pagination">
   <li class = "disabled"><a href = "#">«</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

.pagination-lg, .pagination-sm

使用这些类可以获得不同大小的项目。

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

默认分页

以下示例演示了上表中讨论的类.pagination的使用 -

<ul class = "pagination">
   <li><a href = "#">«</a></li>
   <li><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 = "#">»</a></li>
</ul>

States

以下示例演示了上表中讨论的类.disabled, .active -

<ul class = "pagination">
   <li><a href = "#">«</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><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 = "#">»</a></li>
</ul>

Sizing

以下示例演示了如何使用类进行大小调整， .pagination-*在上表中讨论 -

<ul class = "pagination pagination-lg">
   <li><a href = "#">«</a></li>
   <li><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 = "#">»</a></li>
</ul>
<br>
<ul class = "pagination">
   <li><a href = "#">«</a></li>
   <li><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 = "#">»</a></li>
</ul>
<br>
<ul class = "pagination pagination-sm">
   <li><a href = "#">«</a></li>
   <li><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 = "#">»</a></li>
</ul>

Pager

如果您需要创建超出文本的简单分页链接，则寻呼机可以很好地工作。与分页链接一样，寻呼机是无序列表。默认情况下，链接居中。下表列出了Bootstrap为寻呼机提供的类。

类描述示例代码

.pager

添加此类以获取寻呼机链接。

类	描述	示例代码
.pager	添加此类以获取寻呼机链接。	`<ul class = "pager"> <li><a href = "#">Previous</a></li> <li><a href = "#">Next</a></li> </ul>`
.previous, .next	使用类.previous左对齐和.next右对齐链接。	`<ul class = "pager"> <li class = "previous"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`
.disabled	添加此类以获得静音外观。	`<ul class = "pager"> <li class = "previous disabled"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

.previous, .next

使用类.previous左对齐和.next右对齐链接。

<ul class = "pager">
   <li class = "previous"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>

.disabled

添加此类以获得静音外观。

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>

默认寻呼机

以下示例演示了上表中讨论的类.pager的使用 -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

对齐链接

下面的示例演示如何使用类对齐， .previous, .next在上表中讨论 -

<ul class = "pager">
   <li class = "previous"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>

States

以下示例演示了上表中讨论的类.disabled的使用 -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>