Bootstrap3实用教程
3.9.1 分页组件
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

当列表内容较多时,分页显示可以降低带宽使用,提高访问速度。分页导航可以为网站或应用提供带有分页功能的导航。

Bootstrap提供了两种类型的分页导航组件,一种是带有多个页码的分页组件(pagination),一种是只有上一页和下一页的翻页组件(pager)。

分页组件

Bootstrap 中,分页组件的中间是页码,两头是上一页和下一页的链接。可以使用无序列表或有序列表来定义分页组件,暂不支持描述列表。只需为列表应用 .pagination 类,并在 <li> 元素中定义页码链接即可。如:

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

效果如图 3‑57所示:

分页组件
图3-57 分页组件

1、禁用和活动状态

对于分页组件,当前页一般会高亮显示,并且链接不能点击。如果当前页是第一页,则上一页的链接不能点击;如果当前页是最后一页,则下一页的链接不能点击。

Bootstrap中,使用 .active 类表示活动的状态,使用 .disabled 类表示禁用的状态。活动的链接显示为白色文本和浅蓝色背景,禁用的链接显示为灰色背景并禁用鼠标。可以为分页组件中的链接添加 .active 类表示当前页,添加 .disabled 类表示不能点击。如:

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

效果如图 3‑58所示:

禁用和活动状态
图3-58 禁用和活动状态

事实上,即便使用 .active.disabled 类,也只能禁用CSS交互行为,而无法禁用链接的默认行为。要禁用链接的默认行为,还需要借助JavaScript脚本。

由于Bootstrap的分页组件中,既支持 <a>标签,也支持<span>标签,因此一个完美的解决方案是,将 .active.disabled 状态的链接替换为<span>标签,这样既能保持需要的样式又不可点击。如:

<ul class="pagination">
  <li class="disabled"><span>«</span></li>
  <li class="active"><span>1</span></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>

2、组件的尺寸

需要更大或更小的分页组件吗?.pagination-lg.pagination-sm类提供了额外可供选择的尺寸。如果希望比默认尺寸大一些,使用 .pagination-lg 类;如果希望比默认尺寸小一些,使用 .pagination-sm 类。如:

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

效果如图 3‑59所示:

分页组件的尺寸
图3-59 分页组件的尺寸

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验