【读书笔记《Bootstrap实战》】5.电子商务网站

构建了公司网站之后，接下来就可以考虑设计一个在线商店了。

此次的设计以上一章的设计为基础， 只是添加了一个包含如下元素的新页面：

□ 包含商品小图、标题和说明的产品网格；

□ 位于左侧的变懒，用于按类别、品牌等筛选商品；

□ 方便用户导航的面包屑和分页链接。

大家先看一看Zappos (http://www.zappos.com/) 和 Amazon (https://www.amazon.com/) 的网站，搜索或者浏览一下其中的商品。此处所要创建的页面，就包含与之类似的商品网格。

完成后的设计在大、中、小屏幕中的效果应该如下图所示：

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

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

1.商品页的标记

我们可以看到页头、导航条内容以及页脚都和上一章的一致，主要是主内容部分不一样。可以从效果图看出，我们可以把主内容分为三个部分：

第1部分： 用无序列表生成的面包屑导航链接。

第2部分：用 h1 表示的页面标题。

第3部分：

□ 一系列用于筛选商品的选项；

□ 九个商品，分别带有小图、标题、说明和按钮；

□ 用无序列表生成的分页链接，位于商品之下，站点页脚之上。

1.1 包屑导航链接

可以参考官方文档:http://getbootstrap.com/components/#breadcrumbs (中文文档：http://v3.bootcss.com/components/#breadcrumbs)

(1)很简单，我们先根据文档敲出代码如下：

   div   role  ="main"  > 
     div   class  ="container"  > 
             ol   class  ="breadcrumb"  > 
                li  >  a   href  ="#"  > Home   a  >  li  > 
                li  >  a   href  ="#"  > Parent Category   a  >  li  > 
                li   class  ="active"  > Current Category   li  > 
              ol  > 
     div  > 
   div  >  

查看更多关于【读书笔记《Bootstrap实战》】5.电子商务网站的详细内容...