6.1.1　形状扩展

6.1.1　形状扩展

有些特殊的情况下，我们可能不太需要Bootstrap默认提供的风格。比如我们想让所有的页码都放在单独的方格里，显示出如图6-1所示的分页效果，该如何做呢？

6.1.1　形状扩展 - 图1 图6-1　设置的分页效果

通过默认分页的源码分析我们可以知道，如果要单个元素都要分开显示，则最简单的方式就是单个元素的边框都设置为1px，然后每个元素之间设置一定像素的margin值。源码如下：

.pagination > li > a,
.pagination > li > span {
    margin: 0 5px;
    border: 1px solid #dddddd;          /* 设置所有的边框都为1像素 */
}

然后再去除两边的圆角设置即可。由于默认分页单独通过first-child和last-child特性对两边的圆角进行了设置，所以需要重设圆角的值为0。源码如下：

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0px;                 /* 不管是第一个还是最后一个元素，都禁用圆角 */
}

在默认的Bootstrap.css之后应用上述两段样式可将分页效果设置成如图6-1所示的效果，从而达到我们的要求。

在自定义样式的时候，为了避免覆盖Bootstrap默认的样式或行为，建议通过附加样式的形式来实现。比如上述示例，可以额外添加一个square样式。源码和使用示例如下：

.pagination.square > li > a,
.pagination.square > li > span {
    margin: 0 5px;
    border: 1px solid #dddddd;          /* 设置所有的边框都为1像素 */
}
 
.pagination.square > li:first-child > a,
.pagination.square > li:first-child > span,
.pagination.square > li:last-child > a,
.pagination.square > li:last-child > span {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0px;                 /* 取消圆角 */
}

上述用法，也利用了Bootstrap在CSS方面的设计思想，再多应用一个square样式即可。

<ul class="pagination square">
...
</ul>

注意

❑同理，如果想让pager里的两个链接变成长方形，则只需把圆角角度设置为0px即可。

❑同样的道理，如果要想每个页码都设置成圆形，则只需将所有li元素圆角的border-radius值设置大一些就可以了，比如15px。

6.1.1 形状扩展