Bootstrap 分页

内容一页放不下时，分页把内容切分成多页，用户靠分页条在页与页之间跳转。Bootstrap 用 .pagination 提供经典的数字分页条，用 .pager 提供简化的"上一页/下一页"翻页器，本节就来掌握这两种写法。

基本分页

给 <ul> 加上 .pagination 类即可生成分页条，每个 <li> 中放一个 <a> 链接：

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

效果：一排带浅灰背景的圆角按钮平铺在页面左侧，"«"表示上一页、"»"表示下一页，鼠标悬停时颜色加深。

激活与禁用状态

在 <li> 上添加 .active 高亮当前页码，添加 .disabled 表示不可点击（例如处于第一页时"上一页"应置灰）：

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">»</a></li>
</ul>

效果：第 2 页变为蓝底白字以标识当前位置，最左侧的箭头呈灰色、点击无效。

分页尺寸

在 .pagination 上再追加尺寸类即可放大或缩小整组分页按钮，.pagination-lg 为大号、.pagination-sm 为小号：

<ul class="pagination pagination-lg"><li><a href="#">1</a></li></ul>
<ul class="pagination"><li><a href="#">1</a></li></ul>
<ul class="pagination pagination-sm"><li><a href="#">1</a></li></ul>

效果：三行分页按钮的尺寸依次递减，便于在页脚、侧栏等不同区域选用合适的规格。

翻页器 Pager

不想显示页码、只想要"上一页/下一页"时用 .pager，配上 .previous 与 .next 可让两枚按钮分别顶到左右两端：

<ul class="pager">
  <li class="previous"><a href="#">← 上一页</a></li>
  <li class="next"><a href="#">下一页 →</a></li>
</ul>

效果：页面左右两端各出现一枚按钮；给 <li> 加上 .disabled 同样可以让某一侧按钮置灰失效。

小结：数字分页用 .pagination（配合 .active、.disabled 与尺寸类），简化翻页用 .pager，两者都以列表为骨架，按场景选用即可。