构建了公司网站之后，接下来就可以考虑设计一个在线商店了。
此次的设计以上一章的设计为基础， 只是添加了一个包含如下元素的新页面：
□ 包含商品小图、标题和说明的产品网格；
□ 位于左侧的变懒，用于按类别、品牌等筛选商品；
□ 方便用户导航的面包屑和分页链接。
大家先看一看Zappos () 和 Amazon (https://www.amazon.com/) 的网站，搜索或者浏览一下其中的商品。此处所要创建的页面，就包含与之类似的商品网格。
完成后的设计在大、中、小屏幕中的效果应该如下图所示：
在超小屏幕上，我们希望页面的布局变成如下所示：
Bootstrap 为完成此次设计提供了很好起点，在此基础上，我们要使用LESS完成调整工作。
1.商品页的标记
我们可以看到页头、导航条内容以及页脚都和上一章的一致，主要是主内容部分不一样。可以从效果图看出，我们可以把主内容分为三个部分：
第1部分： 用无序列表生成的面包屑导航链接。
第2部分：用 h1 表示的页面标题。
第3部分：
□ 一系列用于筛选商品的选项；
□ 九个商品，分别带有小图、标题、说明和按钮；
□ 用无序列表生成的分页链接，位于商品之下，站点页脚之上。
1.1 包屑导航链接
可以参考官方文档:#breadcrumbs (中文文档：#breadcrumbs)
(1)很简单，我们先根据文档敲出代码如下：
<div role="main"> <div> <ol> <li><a href="#">Home</a></li> <li><a href="#">Parent Category</a></li> <li>Current Category</li> </ol> </div> </div>
可以看到显示效果如下：
(2) 然后我们来自定义面包屑的设计，去掉浅灰色背景和多余的内边距。对于这个简单的调整，我们可以直接修改 bootstrap 文件夹中的 breadcrumbs.less 文件，同时注释掉不需要的行，这样可以留下修改的痕迹：
.breadcrumb { padding: 0; //@breadcrumb-padding-vertical @breadcrumb-padding-horizontal; margin-bottom: @line-height-computed; list-style: none; //background-color: @breadcrumb-bg;
修改后显示效果如下：
1.2 页面标题
同样，官方文档：#page-header （中文文档：#page-header）
(1) 同样，参考文档，可以敲出代码如下：
<div> <h1>Product Category Name <small>with explanatory text</small></h1> </div>
可以看到显示效果如下：
(2) 我们简单的调整下样式，删除下方边框。打开 bootstrap 文件夹中的 type.less 文件，搜索 .page-header 并把规则 border-bottom 注释掉：
.page-header { padding-bottom: ((@line-height-computed / 2) - 1); margin: (@line-height-computed * 2) 0 @line-height-computed; //border-bottom: 1px solid @page-header-border-color; }
保存，编译，刷新，就会看到更清爽的结果。更多的空白与我们整体设计保持了一致，如下所示;
1.3 侧边栏、商品网格、分页链接
我们的主要显示内容就是左侧的侧边栏和右侧的商品网格，很明显，我们用栅格系统把它分为两个部分：
<div> <div> </div> <div> </div> </div>
1.3.1 侧边栏
我们可以看到侧边栏由几个标题和对应的筛选商品的选项以及一个超链接按钮组成，我们可以先简单的实现代码如下，具体样式，我们之后再调整。
<div> <h2>Narrow your selection</h2> <a href="#"> <h3>Clearance Sale</h3> <p>View clearance items</p> </a> <h3>Categories</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li> <li><a href="#">Option 6</a></li> <li><a href="#">Option 7</a></li> <li><a href="#">Option 8</a></li> <li><a href="#">Option 9</a></li> <li><a href="#">Option 10</a></li> </ul> <h3>Brands</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li> <li><a href="#">Option 6</a></li> <li><a href="#">Option 7</a></li> <li><a href="#">Option 8</a></li> <li><a href="#">Option 9</a></li> <li><a href="#">Option 10</a></li> </ul> <h3>Another Filter</h3> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li> <li><a href="#">Option 6</a></li> <li><a href="#">Option 7</a></li> <li><a href="#">Option 8</a></li> <li><a href="#">Option 9</a></li> <li><a href="#">Option 10</a></li> </ul> </div>
1.3.2 商品网格
至于商品网格，我们可以看到是由九种商品的商品网格，以及商品网格下的分页链接组成。
同样，我们用栅格系统简单实现九个商品的显示，每行三个商品，共三列。