W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 分页



默认分页

为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。

受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。

创建默认分页, 在 <ul> 元素上添加 .pagination 类即可。

Example

<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 类。

Example

<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 类。

Example

<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-lg.pagination-sm 类提供了额外可供选择的尺寸。

Example

<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>
尝试一下 »

Complete Bootstrap Navigation Reference

For a complete reference of all navigation classes, go to our complete Bootstrap Navigation Reference.