文章目录

一、商品页的标记
二、面包屑、页面标题和分页导航
三、调整商品网格
四、侧边栏和筛选选项

1.基本布局
2.Clearance Sale按钮
3.选项列表
4.为选项链接添加Font Awesome图标复选框
5.使用LESS混入在栏中对齐选项
6.针对平板和手机调整选项列表布局
7.在手机上折叠选项面板

构建了公司网站之后，接下来就可以考虑设计一个在线商店了。
此次的设计以上一章的设计为基础，只是添加了一个包含如下元素的新页面：
- 包含商品小图、标题和说明的产品网格；
- 位于左侧的变懒，用于按类别、品牌等筛选商品；
- 方便用户导航的面包屑和分页链接。
完成后的设计在大、中、小屏幕中的效果应该如下图所示：

在超小屏幕上，希望页面的布局变成如下所示：

Bootstrap 为完成此次设计提供了很好起点，在此基础上，要使用LESS完成调整工作。

一、商品页的标记

本章相对第四章新增products.html标记中的 head 、页头、导航条元素都和第 4章一样。不一样的地方在 main role="main"元素中，这个元素中包含的新内容按先后顺序是：
- 用无序列表生成的面包屑导航链接；
- 用 h1 表示的页面标题；
- 一系列用于筛选商品的选项；
- 九种商品，分别带有小图、标题、说明和按钮；
- 用无序列表生成的分页链接，位于商品之下，站点页脚之上。
接下来要完成的事：
- 首先要应用 Bootstrap 内置的面包屑、页面标题和分页链接的样式，再对它们进行自定义。
- 然后，要改进九个商品的布局，创造性地使用 Bootstrap的网格系统，让这些格子在不同断点切换时保持视觉上的整齐划一。
- 最后，就是要给筛选选项添加样式，主要是增强它们的布局，再使用 Font Awesome图标作为复选框。

二、面包屑、页面标题和分页导航

接下来，要把 Bootstrap的样式应用到面包屑、页面标题和分页导航，然后再对它们进行自定义

(1) 在编辑器中打开 products.html。

(2) 找到位于页面标题 h1 上方的无序列表，给 ul 标签添加类 breadcrumb ，然后给最后一个列表项添加类 active ：

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Parent Category</a></li>
<li class="active">Current Category</li>
</ul>

这两个类对应相关 Bootstrap的面包屑样式，相关文档请参考这里：https://v3.bootcss.com/components/#breadcrumbs 。

保存并刷新浏览器。应该能看到如下图所示的效果：

(3) 接下来自定义面包屑的设计，去掉浅灰色背景和多余的内边距。对于这个简单的调整，可以直接修改 boostrap 文件夹中的 breadcrumbs.less 文件，同时注释掉不需要的行，这样可以留下修改的痕迹。

把 padding 设置为 0 ，完全删除 background-color ，使用注释可以让以后知道在这里修改了什么：

.breadcrumb {
padding: 0; // 8px 15px; // edited
margin-bottom: @line-height-computed;
list-style: none;
// background-color: @breadcrumb-bg; // edited

(4) 下面是页面标题。Bootstrap的页面标题需要被嵌套在类为 page-header 的 div 元素中。

相关文档可以参考这里：https://v3.bootcss.com/components/#page-header 。

按照文档来调整标记，为了利用 Bootstrap 给标题注释添加的样式，再在 small
标签中添加一些文本内容：

<div class="page-header">
<h1>Product Category Name <small>with explanatory
text</small></h1>
</div>

这样就会得到如下所示的结果：

(5) 保留标题带的内、外边距，删除下方边框。打开 bootstrap文件夹中的 type.less文件，搜索 .page-header 并把规则 border-bottom 注释掉：

.page-header {
// border-bottom: 1px solid @page-header-border-color;
}

保存，刷新，就会看到更清爽的结果。更多的空白与整体设计保持了一致，如下图所示：

(6) 最后是分页链接。相关的标题就在关闭的 main 标签（）稍微靠上一点。在这个标题之上，依次是 .container 、 .row 和 .products-grid 的关闭 div 标签：

            </div><!-- /.products-grid -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</main>

Bootstrap中分页样式的文档在这里：https://v3.bootcss.com/components/#pagination 。

要应用分页导航样式，只需把 class="pagination" 添加到关闭的 .products-grid标签之上的 ul 标签：

<ul class="pagination">
    <li><a href="#"><span class="fa fa-chevron-left"></span>
    Prev</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="#">Next <span class="fa fa-chevron-
    right"></span></a></li>
</ul>

对于 Next和 Prev，原来的标记中已经应用了类为 a-chevron-left 和 a-chevron-right 的 span 标签，以使用 Font Awesome图标。结果就是得到如下所示的屏幕截图：

(7) 下面让分页导航在网格下方居中。首先，把它包围在一个 div 标签中，给这个标签一个row 类以保证它清除上方内容，然后添加一个恰如其分的自定义类 pagination-wrap ：

<div class="row pagination-wrap">
    <ul class="pagination">
        <li> ...
    </ul>
</div>

(8) 现在就要自己写样式让这个组件在它的父元素内居中。

在第 4章中，使用了自定义的LESS文件 _page-contents.less可保存自定义样式。
在此，创建一个更具体的文件来保存针对商品网格的样式。创建新文件 _products-grid.less，将其与其他自定义LESS文件保存在一起，然后加入以下样式：

.pagination-wrap {
    text-align: center;
}

保存文件。

(9) 最后把新文件添加到 LESS文件的导航列表。打开 less文件夹中的_main.less，在注释 // Other custom files 下面添加一行导入语句：

@import "_products-grid.less"; // added

保存这个文件，然后编译为 CSS。
刷新浏览器，应该看到分页导航居中了。

三、调整商品网格

这一节要把商品网格调整到位。仔细看一看每个商品的标记，你会发现它们都有一个类： col-sm-4 ：

<div class="product-item col-sm-4">

这个类虽然起到了约束每个商品宽度的作用，但整个网格看起来仍然尽不如人意。
主要问题是每个商品的高度不确定。因此，Bootstrap 在向左浮动所有商品时，后面的商品就有可能插入到前面的商品中。结果就是整个网格显得很乱，如下图所示。
目前，在中大型视口中，第 4~7个商品由于高度不等，浮动后没有对齐。
的任务就是要调整网格系统，让所有网格的视觉效果得到增强。调整之后，马上就解决布局的问题。

(1) 因为要写自定义的样式，所以还要用编辑器打开_products-grid.less。

(2) 下面写一些样式，调整图片宽度、字号、内边距和外边距，代码如下：

.product-item {
    padding-bottom: 32px;
    img {
        width: 100%;
    }
    h2 {
        font-size: @font-size-large;
        line-height: 1.2;
        padding: 0 !important;
        margin-top: 6px;
        margin-bottom: 2px;
    }
    p {
        font-size: @font-size-small;
        line-height: 1.3;
        color: @gray;
    }
}

(3) 以上样式的作用如下：
- 给每个商品底部添加一些内边距；
- 把每个商品小图的宽度限制在商品区域内；
- 把 h2 的字号减小到 @font-size-large ；
- 把 p 的字号减小到 @font-size-small ；
- 把 h2 的内边距减小为 0，使用 !important 保证覆盖在标准页面中应用的冲突规则；
- 把 p 的字体颜色设置为 @gray 。
保存新样式，编译为 CSS，再刷新浏览器。尽管此时的布局还不整齐，但整体效果已经大为改观

(4) 现在该来解决布局问题了。解决问题的关键是找到最高的商品。假设有一个指南，其中对每个商品使用什么图片和文字介绍都有规划。所有商品的小图都是标准大小，文字说明也不会比当前示例页面中的多。这样的话，就可以给所有商品都设置一个固定的高度，或者使用 em 或 ex 等更灵活的单位。在这个练习中，就使用 360px 的固定值，并把超出的部分隐藏起来。因为这些规则针对的是页面布局，所以要单独写一条规则，文件当然还是_products-grid.less:

.product-item {
height: 360px;
overflow: hidden;
}

保存这个文件，编译为 CSS，然后刷新浏览器。你会发现布局问题瞬间得到了解决！
结果如下图所示：

(5) 在此之后，就可以放心地使用 Bootstrap 的响应式分栏类，去调整不同视口的布局效果了。具体来说，希望当视口小和超小时，每行只显示两个商品；而当视口中等或较大时，每行显示三个商品。为实现这个效果，要找到并替换每个商品中的类，结果要变成如下所示：

<div class="product-item col-xs-6 col-md-4">

替换成这两个类之后，每个商品在超小和小视口中将会是屏幕宽度的一半，而在中大视口中将切换成屏幕宽度的三分之一。
保存，编辑并刷新浏览器。拖放浏览器窗口，变小再变大，看看商品动态变化的情况。
以下是小和超小视口下的情景：

超小视口下因为侧边栏的干扰，还是有显示问题，所以接下来调整侧边栏

四、侧边栏和筛选选项

侧边栏和筛选选项就在商品标记的前面。在小、中、大视口中，侧边栏目前都位于左侧。
目前侧边栏的样子如下所示：

而在完成设计工作后，希望把 Clearance Sale做成一个超大按钮，把筛选选项排成两栏，而且每个选项前是复选框而非项目符号，如下图所示：

下面先从基本的样式开始，把布局弄好。

1.基本布局

先来调整字体、颜色、外边距和内边距。
在_prod ucts-grid.less中添加如下规则：

.grid-options {
    .panel;
    .panel-default;
    padding-top: 12px;
    padding-bottom: 24px;
    > h2 {
        margin-top: 0;
        font-size: 1.5 * (@font-size-large);
        line-height: 1.2;
        color: @gray-dark;
    }
}

上面的代码用途如下：
- 给侧边栏应用 Bootstrap默认的 panel 样式（参见：https://v3.bootcss.com/components/#panels ）；
- 给侧边栏添加上、下内边距，让新背景贯穿侧边栏内容区；
- 调整 h2 标题的字号、行高和颜色。
下一步来做 Clearance Sale按钮。

2.Clearance Sale按钮

接下来把 Clearance Sale链接变成一个超大的吸引人的按钮。
按照下面的说明调整标记：
- 把链接的标题和段落都转换成按钮；
- 添加自定义的按钮类 btn-feature ，这是在第 4章创建的，具有特殊的颜色——红色；
- 给整个标签添加 Font Awesome图标，通过使用 Font Awesome内置的 icon-3x 类，将图标放大三倍。

要了解 Font Awesome 特殊尺寸类的更多信息，请参考相关文档：
http://www.fontawesome.com.cn/examples/#larger

调整后的标记如下所示：

<a class="btn btn-feature choose-clearance" href="#">
<span class="icon fa fa-tag fa-3x"></span>
<h3>Clearance Sale</h3>
<p>View clearance items</p>
</a>

效果立竿见影，向目标迈进了一大步：

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

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

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

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

(4) 覆盖 Bootstrap按钮的 white-space: nowrap 规则，让文本可以折行。

Bootstrap的white-space 规则是在 less/bootstrap/buttons.less 中定义的，关于这个属性的更多信息，大家可以参考 http://css-tricks.com/almanac/properties/w/whitespace/

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

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

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

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

.choose-clearance {
    .center-block();
        width: 92.5%;
        padding-top: 20px;
        padding-bottom: 12px;
        white-space: normal;
        position: relative;
    h3 {
        font-weight: normal;
        color: #fff;
        padding-top: 4px;
        margin: 6px;
    }
    p {
        margin: 6px 20px;
        line-height: 1.2;
    }
    .icon {
        position: absolute;
        top: 0;
        right: 2px;
    }
}

结果就像下面屏幕截图一样：

接下来该轮到筛选商品的选项了。

3.选项列表

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

Amazon：

Zappos ：

PS:在 Amazon 和 Zappos 等电子商务网站上，筛选项与内容管理系统是关联的，网格中的商品会随着用户选择筛选项而动态变化。 Bootstrap 是一个前端设计框架，不是内容管理系统。因此，这个示例做不到动态筛选商品。但这个页面完成后，是完全可以在内容管理系统中使用的。
先从每个列表的 h3 元素开始，调整它们的大小、行高、外边距和颜色：

.grid-options {
    > h3 {
        font-size: @font-size-large;
        line-height: 1.2;
        margin-top: 12px;
        color: @gray-dark;
    }
}

这里要使用 >h3 子选择符，因为不希望它应用到 h3 标签，特别是
不能应用到 Clearance Sale按钮中的 h3 标签。

无序列表上,它们都有一个特殊的类，叫 options-list ，就用它作为选择符，确保只针对这些特殊的列表。
首先去掉项目符号和内边距：

.grid-options {
    ..
    .options-list {
        list-style-type: none;
        padding-left: 0;
    }

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

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

要了解 Bootstrap的按钮类，请参见：https://v3.bootcss.com/css/#buttons

现在保存、编译并刷新浏览器，看看结果。结果应该如下图所示：
每个选项链接都有了内边距，字号和颜色也都合适了。

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

好了，下一步是给选项链接添加复选框。

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

本节，将使用 Font Awesome图标在选项链接左侧添加复选框。但不在标记中添加，而是在 LESS 中添加，因为更快捷。然后更进一步，加入另一个 Font Awesome图标，以表示悬停、聚焦和活动状态下勾选的复选框。
通过 LESS添加图标需要从三个文件中取得 Font Awesome样式。首先，从 font-awesome文件夹的core.less中获得基本的样式。在这个文件中，可以看到以下重要的样式：

.@{fa-css-prefix} {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

以上样式是所有 Font Awesome图标样式的基础，包括作为字体的 Font Awesome 图标，以此为基础可以进一步加强相应的样式。
对现在的需求来说，不需要选择符也不需要花括号，只需要其中的规则。要把这些样式应用给选项链接。最重要的，要使用 :before伪元素，因为可以确保结果最佳。

要了解更多 CSS2.1 :before 伪元素的信息，请参考这篇文章：
http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/ 。

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

.grid-options {
    ...
    li {
        ...
        a {
            ...
            &:before {
                // from font-awesome/core.less
                display: inline-block;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;

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

这个图标的 LESS规则可以在 font-awesome文件夹的 icons.less文件里找到。打开该文件，搜索字符串 }-square-o （包括右花括号可以减少匹配项，从而缩小范围），可以看到下面这一行：

.@{fa-css-prefix}-square-o:before { content: @fa-var-square-o; }

对于前面这一行，只需要 content: @fa-var-square-o 。把它复制粘贴到之前&:before 选择符中规则的后面：

li {
    ...
    a {
        ...
        &:before {
            ...
            content: @fa-var-square-o;

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

width: (18em / 14);
text-align: center;

添加上面的样式后，编译它们为 CSS并刷新浏览器。应该看到下图所示的复选框：接下来，以同样的方式添加选择符和规则，把 Font Awesome复选框图标的勾选版应用给链接的悬停、焦点和活动状态：

li {
    ...
    a {
        &:before {
            ...
            content: @fa-var-square-o;
        }
        &:hover:before,
        &:focus:before,
        &:active:before,
        .active &:before {
            content: @fa-var-check-square-o;
        }
}

保存文件，编译为 CSS，然后刷新浏览器。当鼠标悬停在某个链接上时，就会看到被勾选的复选框，如下图所示：

请注意，目前还没有办法强制某个链接停留在活动状态，因为没有内容管理系统支撑。但样式已经齐备，如果有了内容管理系统，就可以直接用了。

接下来，考虑一下充分利用侧边栏的空间，让选项浮动起来。

5.使用LESS混入在栏中对齐选项

上一节，使用 LESS实现了以往需要通过添加标记实现的功能。考虑到筛选项的数量很多，这样做效率最高。同样的思路也适用于对齐侧边栏中的选项。当然，如果使用 Bootstrap的 row 和栏类，通过调整标记也是可以的：

<ul class="options-list options-categories row">
<li class="col-xs-6"><a href="#">Option 1</a></li>
<li class="col-xs-6"><a href="#">Option 2</a></li>
...

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

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

.options-list {
    .make-row();
    ...

这个混入加入的样式与在标记中添加 row 类加入的样式一样。但这里只需要一行代码。

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

li {
    .make-xs-column(6);

这样就跟给相关的 li 标签添加 col-xs-6 类的效果一样了。

(3) 添加前面两行之后，保存文件，编译为 CSS，再刷新浏览器。应该可以看到选项链接分成两栏了：

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

要限制选项面板的宽度，让它在平板电脑中不至于太宽。
目前来看，Clearance Sale按钮有点太宽了。在 480~768px下，选项列表相隔也太远了。
相应的截图如下所示：

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

.grid-options {
    ...
    max-width: 480px;

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

li {
    .make-xs-column(6);
    @media screen and (max-width: @screen-xs-max) {
    .make-xs-column(4);
}

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

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

.grid-options {
   ...
   .center-block();

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

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

.product-item { 
  ...
  clear:none !important;
  ...

现在再解决下一个问题：在单栏布局中隐藏筛选选项，只在需要时显示。

7.在手机上折叠选项面板

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

原因就是筛选项不必要地占据了大量空间。商品本身才是最应该首先显示的。既要让用户迅速看到商品，也可以在需要时打开筛选项。
为此，需要使用 Bootstrap的折叠插件。下面几步讲解如何对选项面板使用折叠插件，同时添加一个扩展面板的按钮，并把折叠行为限定在窄视口中。

(1) 在编辑器中打开 products.html。

(2) 添加一个新的 div 标签，包装 Clearance Sale按钮和三个选项列表。给这个 div 添加一个特殊的类 collapse ，以及一个唯一的 ID，以便 JavaScript插件找到它，同时也添加一个同名的类：

<div id="options-panel" class="options-panel collapse">
    <a class="btn btn-feature choose-clearance" href="#">
    ...
    <h3>Categories</h3>
    <ul class="options-list options-categories">
        <li><a href="#">Option 10</a></li>
        ...
    </ul>
</div><!-- /#options-panel.collapse -->

Bootstrap的折叠JavaScript插件也是在响应式折叠导航条中使用的。
这个插件也可以用于其他用途，具体可参考 Bootstrap 的文档：
https://v3.bootcss.com/javascript/#collapse 。

(3) 保存文件，刷新浏览器。你会发现 Clearance Sale按钮和选项列表顿时从眼前消失了。只剩下选项面板上方的 h2 标题“Narrow your selection”了，如下图所示：

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

(4) 在这个还能看见的内容为“Narrow your selection”的 h2 中，添加一个 button 元素，
还有相应的属性：

<h2 class="clearfix">Narrow your selection
    <button type="button" class="options-panel-toggle btn btn-primary pull-right" data-toggle="collapse" data-target="#options-panel">
    <span class="icon fa fa-cog fa-2x"></span>
    </button>
</h2>

下面来解释一下上面的标记：
- 给 h2 添加的 clearfix 类可以确保它包含切换按钮，因为切换按钮是浮动到右边的（可以在 bootstrap文件夹的 utilities.less文件中找到 clearfix 类，在 mixins.less文件中找到生成它的混入）；
- 类 btn 和 btn-primary 会给新的按钮添加 Bootstrap的基本按钮样式，背景颜色为 @brand-primary ；
- 类 pull-right 会把按钮浮动到右侧；
- 在 button 元素中，放了一个 Font Awesome齿轮图标，使用 fa-2x 类放大到两倍。
保存并刷新浏览器，可以看到下面的结果：

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

// Responsive adjustments
@media (min-width: @screen-sm-min) {
    .options-panel {
        display: block;
    }
    .options-panel-toggle {
        display: none;
    }
}