目录
  1. WIKI教程
  2. 学习Bootstrap
  3. Bootstrap - 分页( Pagination)

Bootstrap - 分页( Pagination)

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

分页(Pagination)

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

类 描述 示例代码
.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>

默认分页

以下示例演示了上表中讨论的类.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 添加此类以获取寻呼机链接。 
<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>
新页面打开
<上一篇.Bootstrap - 面包屑( Breadcrumb)
Bootstrap - Labels.下一篇>
↑回到顶部↑
WIKI教程 @2018