构建了公司网站之后,接下来就可以考虑设计一个在线商店了。此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面:□ 包含商品小图、标题和说明的产品网格;□ 位于左侧的变懒,用于按类别、品牌等筛选商品;□ 方便用户导航的面包屑和分页链接。大家先看一看Zappos (h ...
构建了公司网站之后,接下来就可以考虑设计一个在线商店了。
此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面:
□ 包含商品小图、标题和说明的产品网格;
□ 位于左侧的变懒,用于按类别、品牌等筛选商品;
□ 方便用户导航的面包屑和分页链接。
大家先看一看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.电子商务网站
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。