最新的Web开发教程
 

Bootstrap Pagination


基本分页

如果你有一个网站,有很多的网页,你不妨某种分页添加到每个页面。

在引导一个基本的分页如下:

要创建一个基本的分页,添加.pagination类的<ul>元素:

<ul class="pagination">
  <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>
</ul>
试一试»

活动状态

激活状态显示的是当前页面:

添加类.active让用户知道他/她所在的网页:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
试一试»

Disabled State

禁用的链接无法点击:

添加类.disabled如果一个链接出于某种原因被禁用:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
试一试»

Pagination Sizing

分页块也可以尺寸以更大的尺寸或更小的尺寸:

添加类.pagination-lg较大块或.pagination-sm为更小的块:

<ul class="pagination pagination-lg">
  <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>
</ul>

<ul class="pagination pagination-sm">
  <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>
</ul>
试一试»

面包屑

为分页另一种形式,是面包屑:

.breadcrumb类表示一个导航层次结构中的当前页面的位置:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»


完成Bootstrap导航参考

对于所有的导航类的完整参考,请访问我们的完整Bootstrap的导航参考