4.9.2　翻页

源码文件：pager.less

CSS文件：bootstrap.css 4227行之后

在一些简单的网站上（比如博客、杂志），一般不会展示很多页码，而是使用“上一页”、“下一页”的简单分页方式。默认情况下，Bootstrap提供的这种组件是居中显示的。示例代码如下：

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

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

图4-56　翻页效果

翻页效果的实现方式，有如下几个要点：

❑整体居中显示。

❑li元素有圆角。

❑设置鼠标移动上去的效果。

❑支持a元素和span元素。

支持以上几个要点的主要源码如下：

// 源码4227行
.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;   /* 居中显示 */
  list-style: none;     /* li无标记显示 */
}
.pager li {
  display: inline;      /* 内联显示 */
}
.pager li > a,
.pager li > span {
  display: inline-block;        /* 内联块，支持a元素和span元素 */
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;       /* 边框设置1像素 */
  border-radius: 15px;  /* 加大圆角弧度 */
}
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;        /* 鼠标触发或焦点时无下划线 */
  background-color: #eee;
}

如果需要将两个按钮连接，分别进行左右对齐，则需要在按钮的li容器元素上分别应用previous和next样式，效果如图4-57所示。

图4-57　左右对齐的翻页运行效果

两个样式的实现很简单，就是我们平常所用的左右浮动。源码如下：

// 源码4249行
.pager .next > a,
.pager .next > span {
  float: right;         /* 下一页，右浮动 */
}
.pager .previous > a,
.pager .previous > span {
  float: left;          /* 上一页，左浮动 */
}

注意

在li元素上分别应用.pull-left和.pull-right样式也能实现上述效果，因为原理是一样的。

另外，和普通的链接（或其他button元素）一样，应用disabled样式可实现禁用效果，运行效果如图4-58所示。

图4-58　翻页中的禁用效果

和以前一样需要注意，disabled样式只是实现禁用效果，并没有禁用a链接的单击功能。所以如果要禁用单击功能，要么使用JavaScript禁用a的单击行为，要么干脆使用span元素，因为分页组件对a和span两种元素都同样支持。分页组件里的disabled样式源码如下：

// 源码4257行
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #999;          /* 被禁用时，改变文本颜色 */
  cursor: not-allowed;  /* 被禁用时，改回默认的鼠标手形图标 */
  background-color: #fff;
}