你的位置:首页 > 软件开发 > 网页设计 > 【读书笔记《Bootstrap 实战》】5.电子商务网站

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

发布时间:2016-10-13 20:00:07
构建了公司网站之后,接下来就可以考虑设计一个在线商店了。此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面:□ 包含商品小图、标题和说明的产品网格;□ 位于左侧的变懒,用于按类别、品牌等筛选商品;□ 方便用户导航的面包屑和分页链接。大家先看一看Zappos (h ...

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

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

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

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

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

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

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

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

 

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

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

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 (#换成@)。

可能感兴趣文章

我的浏览记录