PS:在 Amazon 和 Zappos 等电子商务网站上，筛选项与内容管理系统是关联的，网格中的商品会随着用户选择筛选项而动态变化。 Bootstrap 是一个前端设计框架，不是内容管理系统。因此，我们这个示例做不到动态筛选商品。但我们 这个页面完成后，是完全可以在内容管理系统中使用的。
先从每个列表的 h3 元素开始，我们调整它们的大小、行高、外边距和颜色：
.grid-options { ... >h3 { font-size: @font-size-large; line-height: 1.2; margin-top: 12px; color: @gray-dark; } }
然后，我们把注意力集中到无序列表上。我们有给每个无序列表上都添加了一个特殊的类，叫 options-list，我们就用它作为选择符，确保只针对这些特殊的列表。
首先去掉项目符号和内边距：
.grid-options { ... .options-list { list-style-type: none; padding-left: 0; } }
接下来是链接样式。稍后我们还要给列表项添加样式，因此我们把这些样式包含了嵌套的选择符中。
.options-list { ... li { a { .btn; .btn-sm; padding-left: 0; padding-right: 0; color: @gray; &:hover, &:focus, &:active, .active & { color: @link-color; } ...
以上规则的作用如下：
□ 我们利用 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 中获得基本样式。在这个文件中，可以看到以下重要的样式：
.@{fa-css-prefix} { display: inline-block; font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
以上样式是所有 Font Awesome 图标样式的基础，包括作为字体的 Font Awesome 图标，以此为基础可以进一步加强相应的样式。
对现在的需求来说，我们不需要选择符也不需要花括号，只需要其中的规则。我们要把这些样式应用给选项链接。最重要的，我们要使用 :before 伪元素，因为可以确保结果最佳。
从 core.less 中复制上面的规则（不包括选择符），粘贴到 _product-grid.less 文件中，嵌套如下：
.grid-options { ...
.options-list { ...
li { ...
a { ...
&:before{
display: inline-block;
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} ...
这些规则为我们下一步打下了基础。下一步就可以指定使用哪个 Font Awesome 图标了。浏览这个页面： ，就会发现空复选框的图标和类名：
这个图标的 LESS 规则可以在 font-awesome 文件夹的 icons.less 文件里找到。打开该文件，搜索字符串"}-square-o" ，可以看到下面这一行：
.@{fa-css-prefix}-square-o:before { content: @fa-var-square-o; }
对于前面这一行，我们只需要 content: @fa-var-square-o 。把它复制到之前的 &:before 选择符中的规则后面：
&:before{ ... content: @fa-var-square-o; }