1.3.3 分页链接

这个很简单，一般使用无序列表实现。不过，我们可以参考分页的官方文档或者中文文档，可以实现代码如下：

显示效果如下：

下面再细化，完成下列目标：

(1) 将 Clearance Sale 显示为块级元素，使用 .center-block() 这个 Bootstrap 的混入将其居中；

(2) 强制其宽度为包含栏的92.5%；

(3) 添加上、下内边距；

(4) 覆盖 Bootstrap 按钮的 white-space:nowrap 规则，让文本可以折行（Bootstrap 的white-space 规则是在 less/bootstrap/buttons.less 中定义的，关于这个属性的更多信息，大家可以参考：css-tricks.com/almanac/properties/w/whitespace/）

(5) 将按钮设置为相对定位，以便对标签应用绝对定位；

(6) 调整标题和段落的字体、颜色和外边距；

(7) 把标签图标定位到右上角。

以上目标通过下列规则就可以实现：

显示效果如下：

3.3 选项列表

本节，我们要把几个列表转换成筛选选项。

如果花点时间分析下在线商店 Amazon (https://www.amazon.com/)或者 Zappos (http://www.zappos.com/) 的商品筛选选项，会发现这些选项其实是链接列表，而且每个选项都被调整成了复选框的样子。我们也要把链接做成复选框的样式，用户只要选择就会勾选，另外我们还要调整它们以适应多样化的设备，包括平板电脑和智能手机。

Amazon：

@H_403_202@

Zappos ：

PS:在 Amazon 和 Zappos 等电子商务网站上，筛选项与内容管理系统是关联的，网格中的商品会随着用户选择筛选项而动态变化。 Bootstrap 是一个前端设计框架，不是内容管理系统。因此，我们这个示例做不到动态筛选商品。但我们 这个页面完成后，是完全可以在内容管理系统中使用的。

先从每个列表的 h3 元素开始，我们调整它们的大小、行高、外边距和颜色：

然后，我们把注意力集中到无序列表上。我们有给每个无序列表上都添加了一个特殊的类，叫 options-list，我们就用它作为选择符，确保只针对这些特殊的列表。

首先去掉项目符号和内边距：

接下来是链接样式。稍后我们还要给列表项添加样式，因此我们把这些样式包含了嵌套的选择符中。

以上规则的作用如下：

□ 我们利用 LESS 通过 .btn 类加入了基本的按钮样式，包括显示 inline-block 链接和额外的内边距：

■ 因为没有添加其他按钮类，所以也没有出现背景颜色；

■ 通过添加基本的按钮样式，可以让用户更方便点击，使用手指或鼠标皆宜。

□ 再通过 .btn-sm 类引入相关样式，以减少内边距，并让字号比标准按钮再小一些。

□ 接着删除无序列表的左和右内边距。

□ 再把链接文本的颜色改为 @gray。

□ 最后，设置悬停、焦点和活动链接的颜色为 @link-color 。

现在的显示结果如下图所示：

PS:有人可能会奇怪为什么作者要在这里借用按钮的 .btn和 .btn-sm 类，而不是直接把这两个类写进标记。当然也可以那么做，但考虑到链接的数量那么多，还是通过CSS来应用样式更便捷。

3.4 为选项链接添加 Font Awesome 图标复选框

我们将在LESS中使用 Font Awesome图标在选项链接做出添加复选框，另外还要加入另一个 Font Awesome 图标，以表示悬停、聚焦和活动状态下勾选的复选框。

通过 LESS 添加图标需要从三个文件中取得 Font Awesome 样式。首先，从 font-awesome 文件夹的 core.less 中获得基本样式。在这个文件中，可以看到以下重要的样式：

以上样式是所有 Font Awesome 图标样式的基础，包括作为字体的 Font Awesome 图标，以此为基础可以进一步加强相应的样式。

对现在的需求来说，我们不需要选择符也不需要花括号，只需要其中的规则。我们要把这些样式应用给选项链接。最重要的，我们要使用 :before 伪元素，因为可以确保结果最佳。

从 core.less 中复制上面的规则（不包括选择符），粘贴到 _product-grid.less 文件中，嵌套如下：

这些规则为我们下一步打下了基础。下一步就可以指定使用哪个 Font Awesome 图标了。浏览这个页面：http://fontawesome.io/icons/ ，就会发现空复选框的图标和类名：

这个图标的 LESS 规则可以在 font-awesome 文件夹的 icons.less 文件里找到。打开该文件，搜索字符串"}-square-o" ，可以看到下面这一行：

css-prefix}-square-o:before

最后，我们想取得另一些 Font-Awesome 样式，为图标设置固定的宽度，避免图标再切换时出现位移。这些样式可以在 font-awesome 文件夹的 fixed-width.less 文件中找到。复制下面这两行，同样粘贴到 &:before 选择符中：

添加上面的样式后，编译它们为CSS并刷新浏览器。可以看到效果如下:

接下来，我们以同样的方式添加选择符和规则，把 Font Awesome 复选框图标的勾选版应用给链接的悬停、焦点和活动状态：

保存编辑后刷新浏览器可以看到效果如下：

3.5 使用 LESS 混入在栏中对其选项

前面，我们使用 LESS 实现了以往需要通过添加标记实现的功能。考虑到筛选项的数量很多，这样做效率最高。同样的思路也适用于我们对齐侧边栏中的选项。

当然，如果使用 Bootstrap 的 row 和栏类，通过调整标记也是可以的：

显示效果如下：

但有了 Bootstrap 的混入，我们用几行 LESS 就可以实现同样的效果。

(1) 首先 .options-list 选择符应用 .make-row() 混入：

.options-list { .make-row(); ... 这个混入加入的样式与我们在标记中添加 row 类加入的样式一样。但这里只需要一行代码。

(2) 然后使用 .make-xs-col() 混入给列表项应用分栏规则：

标签添加 col-xs-6 类的效果一样了。

3.6 针对平板和手机调整选项列表布局

我们要限制选项面板的宽度，让它在平板电脑中不至于太宽。

目前来看，Clearance Sale 按钮有点太宽。在 480px~768px 下，选项列表相隔太远了。

相应的截图如下：

其实只要给选项版设置一个最大宽度就行了：

下面我们再调整选项列表，让它们在小视口中显示为三栏。使用LESS ，可以在适当的选择符中嵌套一个媒体查询，然后在其中添加一个用于调整的 .make-xs-column(4) 混入：

现在保存，编译，刷新浏览器，查看效果。但是我们可能会发现侧边栏靠左对齐的，右侧留白太多。而且商品网格的显示有问题每行只显示了一个商品。

很明显，首先我们需要使侧边栏居中，使用 .center-block() 这个Bootstrap 的混入就可以了，代码如下

另外，商品的显示问题，调试发现是上一章中CSS选择器 div[role="main"] [class*="col-"]清除浮动造成的。

所以，我们只需要不清楚浮动就可以了：

现在的效果就可以了：

3.7 在手机上折叠选项面板

现在，筛选项占据了相当对的垂直空间。这在小屏幕上是个问题，会把商品网格推到页面下方很远的地方。

@H_502_374@

原因就是筛选项不必要地占据了大量空间。商品本身才是最应该首先显示的。我们既要让用户迅速看到商品，也可以在需要时打开筛选项。

为此，我们使用 Bootstrap 的折叠插件。下面几步讲解如何对选项面板使用折叠插件，同时添加一个扩展面板的按钮，并把折叠行为限定在窄视口中。

(1) 打开 html 文档，添加一个div标签，包装 Clearance Sale 按钮和三个选项列表。给这个div 添加一个特殊的类 collapse，以及一个唯一的 ID，以便 JavaScript 插件找到它，同时也添加一个同名的类,代码如下（可以参考文档：http://getbootstrap.com/javascript/#collapse）：

(2) 保存文件并刷新浏览器。你会发现 Clearance Sale 按钮和选项列表从眼前消失了。只剩下选项面板上方的 h2 标题了，效果图如下：

现在需要一个切换按钮，在点击时显示筛选项。

(3) 然后我们在这个h2标题中添加一个button按钮以及相应属性如下：

简单解释下上面的标记：

□ 给 h2 添加的 clearfix 类可以确保它包含切换按钮，因为切换按钮是浮动到右边的；

□ 类 btn 和 btn-primary 会给新的按钮添加 Bootstrap 的基本按钮样式，背景颜色为 @brand-primary；

□ 类 pull-right 会把按钮浮动到右侧；

□ 在 button 元素中，放了一个 Font Awesome 齿轮图标，使用 fa-2x 类放大到两倍。

保存并刷新浏览器，可以看到显示效果如下：

(4) 下面要写一些规则，在中大屏幕中隐藏切换按钮并展开选项面板。为此，可以在 _product-grid.less 中添加以下规则：

(5) 这些规则的作用如下：

□ 媒体查询保证只把规则应用到小中大视口；

□ 第一条规则抵消 collapse 类的作用，它默认是隐藏元素；

□ 第二条则隐藏切换按钮。

保存并刷新，应该就能看到想要的效果了。

在超小视口中，选项列表会折叠起来，但切换按钮可见：

在小、中、大视口，切换按钮隐藏，选项列表可见：

这样，我们的这个页面就完工了。

4.小结

这个示例，我们做了以下事情：

□ 利用 Bootstrap 的样式快速实现了面包屑、页面标题和分页导航，并根据需要进行了定制；

□ 调整了 Bootstrap 的网格样式，为商品创建了整齐的布局，关键是所有商品的高度要一致；

□ 为复杂的 Clearance Sale 按钮应用了样式，用到了 @brand-feature 这个红色背景；

□ 利用 btn 类的样式让筛选按钮更容易点击或触摸，通过自定义满足了我们的特殊需求；

□ 使用 Bootstrap 的分栏类，加上响应式调整，对齐了筛选项列表，而且适合多视口；

□ 在自定义样式表中借用 Font Awesome 样式在筛选项旁边添加复选框；

□ 设置了选项面板在窄视口中折叠，在小中大视口中可见。

此例显示效果地址：http://ycdoit.com/show/bootstrap-code-05.html （附《Bootstrap 实战》的PDF文档和源码链接：）

本例源码下载：

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

• 上一篇：BootStrap实现邮件列表的分页和模态下一篇：Bootstrap企业网站实战项目4