4.9.1　页码分页

4.9.1　页码分页

源码文件：pagination.less

CSS文件：bootstrap.css 4134行之后

普通页码分页（pagination）的效果如图4-52所示。中间是页码，两头分别是上一页和下一页的链接。

4.9.1　页码分页 - 图1 图4-52　普通分页效果

页码分页的HTML代码和样式设置非常容易，只需要在ul上设置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>

页码分页实现原理可以分解为如下两个步骤。

步骤1　设置li元素的内联显示和边框属性。源码如下：

// 源码4134行
.pagination {
  display: inline-block;                /* 内联块显示 */
  padding-left: 0;              /* 取消左内边距块显示 */
  margin: 20px 0;                       /* 上下margin为20像素 */
  border-radius: 4px;           /* 容器元素的圆角设置 */
}
.pagination > li {
  display: inline;              /* 内联显示 */
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.428571429;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;               /* 设置所有的边框都为1像素 */
}

运行效果如图4-53所示。

4.9.1　页码分页 - 图2 图4-53　设置边框

步骤2　设置第一个元素和最后一个元素的圆角，即可得到最终效果。源码如下：

// 源码4155行
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;                               /* 取消左外边距*/
  border-top-left-radius: 4px;          /* 设置左上方圆角 */
  border-bottom-left-radius: 4px;       /* 设置左下方圆角 */ 
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;         /* 设置右上方圆角 */
  border-bottom-right-radius: 4px;      /* 设置右下方圆角 */
}

运行效果如图4-54所示。

4.9.1　页码分页 - 图3 图4-54　设置圆角

1.状态支持

对于分页，一般来说当前页面会高亮显示，并且不允许单击。而在第一页的时候，上一页链接也不允许单击。为此Bootstrap提供了两个通用的样式来实现，分别是：active和disabled（源码在4166行之后）。示例代码如下：

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

上述示例的运行效果如图4-55所示。

4.9.1　页码分页 - 图4 图4-55　当前页面禁用状态

上述代码，即便应用了active和disabled，也阻止不了单击效果，还是需要JavaScript来阻止。所以一般情况下，最终的完美解决方案是在上述两种样式的li元素里使用span元素而不是a元素。因为从上述2个步骤的分析源码可以看出，pagination在li元素里支持a和span两种元素标签。示例代码如下：

<ul class="pagination">
  <li class="disabled"><span>«</span></li>
  <li class="active"><span>1</span></li>
</ul>

2.大小支持

同button的样式btn一样，分页也支持增大和缩小风格，其样式分别是：.pagination-lg和.pagination-sm。使用方式如下：

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

大小样式主要是增加相应的padding大小、字体大小、圆角大小。源码如下：

// 源码4197行
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;                   /* 增大padding值 */
  font-size: 18px;                      /* 增大字体大小 */
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {        /*第一个li项，增大圆角弧度*/
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span { /*最后一个li项，增大圆角弧度*/
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pagination-sm样式的设置类似，详情请阅读源码4212行。

4.9.1 页码分页