← Bootstrap 面包屑导航( Breadcrumbs ) Bootstrap 3 标签 →

Bootstrap 分页 ( pagination )

Bootstrap 3 使用无序列表来实现 分页 ( pagination )

Bootstrap 分页( Pagination )

下表列出了 Bootstrap 3 提供的处理分页的 CSS class

Class 描述/范例代码

.pagination

添加该 class 来在页面上显示分页

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

.disabled
.active

可以自定义链接
通过使用 .disabled 来定义不可点击的链接
通过使用 .active 来指示当前的页面

<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

使用这些 class 来获取不同大小的项

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

默认的分页

Bootstrap 3 使用 .pagination 来实现分页效果

<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

运行范例 »

运行以上范例，输出结果如下

默认的分页

分页的状态

.disabled 可以用来设置某个分页项不可点击

.active 可以用来设置某个分页项为当前分页

<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

运行范例 »

运行以上范例，输出结果如下

分页的状态

分页的大小

.pagination-lg 和 .pagination-sm CSS 类可以用来调整分页的大小

<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

运行范例 »

运行以上范例，输出结果如下

分页的大小

翻页( Pager )

如果想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现

与分页链接一样，翻页也是无序列表

默认情况下，链接是居中显示

下表列出了 Bootstrap 处理翻页的 CSS class

CSS class 描述/范例代码

.pager

添加该 class 来获得翻页链接

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

.previous
.next

使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐

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

.disabled

添加该 class 来获得一个颜色变淡的外观

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

默认的上一页/下一页

.pager CSS 类还可以用来创建 "上一页/下一页" 分页

<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="#">&larr; 旧的</a></li>
    <li class="next"><a href="#">新的 &rarr;</a></li>
</ul>

运行范例 »

运行以上范例，输出结果如下

翻页中对齐的链接

禁止点击

Bootstrap .disabled CSS 类用于设置分页项不可点击状态

<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

运行范例 »

运行以上范例，输出结果如下

翻页的状态

更多范例

类	描述	范例
.pager	一个简单的分页链接，链接居中对齐	范例 »
.previous	.pager 中上一页的按钮样式，左对齐	范例 »
.next	.pager 中下一页的按钮样式，右对齐	范例 »
.disabled	禁用链接	范例 »
.pagination	分页链接	范例 »
.pagination-lg	更大尺寸的分页链接	范例 »
.pagination-sm	更小尺寸的分页链接	范例 »
.disabled	禁用链接	范例 »
.active	当前访问页面链接样式	范例 »

← Bootstrap 面包屑导航( Breadcrumbs ) Bootstrap 3 标签 →

Bootstrap 3 基础教程

♥ 简单教程，简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.