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

创设了信用合作社网站之后,接下去就能够设想设计贰个在线公司了。

part①、书单

本次的统一筹划以上一章的宏图为根基,
只是添加了一个包涵如下成分的新页面:

一 、精英的材料都以重口味

□ 包蕴货物小图、标题和表明的制品网格;

在任何贰个团队里,盛名度越高的人,本性越鲜明。京东开创者刘强东真诚。雕爷敏锐猖獗。梵高疯狂敢为。和菜头知性。普京总统自闭强硬。马佳佳自由开放。从那么些人物过往的内心活动出发,会发觉众多被嘲弄的病态性格特点,假如能够深入认识,微小立异,勤苦练习,专注持久,那么您就有大概制止成为天才的反面—疯子。爱护好和谐的精神病,不要趋同

□ 位于左边的变懒,用于按项目、品牌等筛选商品;

② 、爱您九周半(电影)

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

善用PUA大概会让一人爱上你,当心境心跳加速过后享有归于平静时,那多少个日常的投机携手相伴的安全感或者会更让我们向往

大家先看一看Zappos (http://www.zappos.com/) 和 Amazon
(https://www.amazon.com/) 的网站,搜索还是浏览一下里面包车型地铁货品。此处所要创制的页面,就带有与之接近的货物网格。

叁 、京东的地下

 实现后的宏图在大、中、小荧屏中的效果应该如下图所示:

郭靖曾评价京东创办人刘强东格外擅于抓焦点,并且直接能抓准不放。基于电子商务的大意在于低本钱和高功效,那么转战线上/扩大品类/自行建造物流/技术引领就是意志力要去做的事

图片 1

④ 、升高你的专注力

 

对于创我而言,专注的还要不要低估神游的力量。要追求专注力的收放自如,保持弹性

在超小荧屏上,我们期待页面的布局变成如下所示:

伍 、怪诞行为学

图片 2

勤于思考生活里惯性行为的幕后逻辑,以及为什么惯性使然?少一些相对论,就多一些美满感

Bootstrap
为成功本次规划提供了很好起点,在此基础上,大家要选择LESS完结调整工作。

part②、思考

 

① 、你能够指责自个儿,能够攻击本身,只要你让本身走本身的路就行

1.商品页的号子

2、大家都以大人,不会像孩子同一自由被封官许愿打动,打动大家的往往是“你把自家放在心上”的采暖

大家得以观望页头、导航条内容以及页脚都和上一章的平等,首若是主内容部分分歧。可以从效益图来看,大家得以把主内容分为四个部分:

三 、批评的底色是进步,而叫苦不迭则是撤退的掩护

第①部分: 用冬天列表生成的面包屑导航链接。

肆 、阳光能够,恶意3遍又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>

能够观望突显效果如下:

图片 3

(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;

修改后显得效果如下:

图片 4

 

1.2 页面题目

一如既往,官方文书档案:http://getbootstrap.com/components/#page-header
(普通话文书档案:http://v3.bootcss.com/components/#page-header

(1) 同样,参考文书档案,能够敲出代码如下:

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

能够观察彰显效果如下:

图片 5

(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;
}

封存,编写翻译,刷新,就会看到更舒服的结果。越多的空白与咱们完全设计保持了扳平,如下所示;

图片 6

1.3 侧边栏、商品网格、分页链接

大家的第②呈现内容正是左手的侧边栏和右手的商品网格,很醒目,大家用栅格系统把它分为多少个部分:

<div class="row">
<div class="grid-options col-sm-3">                   
  </div>
  <div class="products-grid col-sm-9">
  </div>
</div>

1.3.1 侧边栏

大家得以看来侧边栏由多少个题目和呼应的筛选商品的选项以及一个超链接按钮组成,大家得以先不难的落到实处代码如下,具体样式,大家现在再调动。

<div class="grid-options col-sm-3">
  <h2>Narrow your selection</h2>
  <a class="choose-clearance" href="#">
  <h3>Clearance Sale</h3>
  <p>View clearance items</p>
  </a>
  <h3>Categories</h3>
  <ul class="options-list options-categories">
    <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 class="options-list options-brands">
    <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 class="options-list options-other">
    <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 商品网格

有关商品网格,大家得以看看是由九种货品的货色网格,以及商品网格下的分页链接组成。

如出一辙,大家用栅格系统简单完毕多少个商品的展现,每行四个商品,共三列。

<div class="products-grid col-sm-9">
<div class="row">
  <div class="product-item col-sm-4"> <a href="#"><img src="img/product.png" alt="sample product" /></a>
    <h2><a href="#">Product Title</a></h2>
    <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
    <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a> </div>
  ...
</div>
<!-- /.row -->
</div>

1.3.3 分页链接

其一非常的粗略,一般采纳无系列表达成。可是,大家得以参照分页的法定文书档案或然中文文书档案,能够完成代码如下:

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1 (current)</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>

来得效果如下:

图片 7

那样主页内容就搭建起来了,大家供给的就是对货品网格和侧面栏举办调整。

 

2.调动商品网格

咱俩需求把货物网格调整成功。以前我们利用栅格系统,通过 col-sm-4
类来约束每一种商品的大幅,但整个网格看起来照旧尽不比人意。

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

注重是出于货物简介的长度的不均等,导致各样商品的冲天不分明。由此,Bootstrap
在向左浮动全体商品时,前面包车型地铁货色就恐怕插入到日前的货色中。结果正是全部网格显得很糊涂,如下图所示:

图片 8

当下,在中山高校型视口,第四~八个商品由于中度不等,浮动后不曾对齐。

大家的天职就是调动网格系统,让抱有网格的视觉效果获得进步。

(1) 成立新文件 less/_product-grid.less ,并在 __main.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)
未来该来缓解布局难题了。化解难题的主假使找到最高的商品。要是我们有叁个指南,当中对各类商品使用什么图片和文字介绍都有筹划。全部商品的小图都以正统尺寸,文字表达也不会比近来我们演示页面中的多。那样的话,大家就足以给持有商品都安装2个原则性的惊人,也许应用
em 或 ex 等更灵敏的单位。在那个示例中,大家就动用360px
的固定值,并把超过的一部分隐藏起来。

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

如此那般布局难题就一蹴即至了,以往的来得效果如下;

图片 9

(4) 在此之后,大家就可以放心地使用 Bootstrap
的响应式分栏类,去调整分化视口的布局功用了。具体来说,大家希望当视口小和超小的时候,每行只突显多少个商品;而当视口中等或较大时,每行突显多少个商品。为落到实处那一个功用,大家要找到并替换各个商品中的类,结果要变为如下所示:

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

替换到那八个类之后,种种商品在超小和小视口将会是荧屏宽度的50%,而在中山大学视口中校切换来显示器宽度的三分一。

以下是小视口下的场地:

图片 10

超小视口下因为侧边栏的干扰,照旧有展现难题,所以大家接下去就要求调整侧边栏了。

 

3.侧边栏和筛选选项

在小、中、大视口中,侧边栏近年来都放在左侧。

如今侧边栏如下所示:

图片 11

而在形成规划工作后,大家愿意把 Clearance Sale
做成2个超大按钮,把筛选选项排成两栏,而且每一种选项前都是复选框而非项目的志,如下所示:

图片 12

上边先从中央的体裁开头,把布局弄好。

 

3.1 基本布局

咱俩先来调动字体、颜色、外边距和内边距。在_product-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样式和 panel-default 样式
(参见:http://getbootstrap.com/components/#panels);

□ 给侧边栏添加上、下面距;

□ 调整 h2 题名的字号、行高和颜料。

 

3.2 Clearance Sale 按钮

作者们要把Clearance Sale 链接变成2个超大的引发人的按钮。

根据下边包车型大巴证实调整标记:

□ 把链接的标题和段落都转换到按钮;

□ 添加自定义的按钮类 btn-feature,这是大家在上一章成立的:

图片 13

□ 给整个标签添加 Font Awesome 图标,通过选拔 Font Awesome 内置的 icon-3x
类,将图标放大三倍。

PS:要打听 Font Awesome
特殊尺寸类的愈来愈多音信,能够参见相关文书档案:http://fontawesome.io/examples/\#larger

调整后的标记如下所示:

<a class="btn btn-feature choose-clearance" href="#"> 

<h3>Clearance Sale</h3>
<p>View clearance items</p>
</a>

来得效果如下:

图片 14

上边再细化,实现下列指标:

(1) 将 Clearance Sale 显示为块级成分,使用 .center-block() 这个Bootstrap 的混入将其居中;

(2) 强制其调幅为涵盖栏的92.5%;

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

(4) 覆盖 Bootstrap 按钮的 white-space:nowrap
规则,让文本能够折行(Bootstrap 的white-space 规则是在
less/bootstrap/buttons.less
中定义的,关于那本性情的越来越多新闻,我们能够参照:https://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;
  }
}

呈现效果如下:

图片 15

 

3.3 选项列表

本节,我们要把几个列表转换来筛选选项。

一经花点时间分析下在线商店 亚马逊(Amazon) (https://www.amazon.com/)或者 Zappos
(http://www.zappos.com/)
的货色筛选选项,会发觉那几个选用其实是链接列表,而且各个选项都被调动成了复选框的楷模。大家也要把链接做成复选框的体制,用户假诺选取就会勾选,别的大家还要调整它们以适应多种化的配备,包涵平板总括机和智能手提式有线电话机。

Amazon:

图片 16

Zappos :

图片 17

 

PS:在 亚马逊(Amazon) 和 Zappos
等电子商务网站上,筛选项与内容管理体系是关乎的,网格中的商品会趁着用户挑选筛选项而动态变化。
Bootstrap
是一个前端设计框架,不是内容管理种类。因而,大家那几个示例做不到动态筛选商品。但我们那么些页面达成后,是一心能够在内容管理体系中使用的。

先从各样列表的 h3 要素开首,我们调整它们的大小、行高、外边距和颜料:

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

下一场,大家把注意力集中到冬天列表上。我们有给每一个冬日,冬辰列表上都添加了三个十分的类,叫
options-list,大家就用它看成选取符,确认保证只针对这么些杰出的列表。

首先排除项指标志和内边距:

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

接下去是链接样式。稍后我们还要给列表项添加样式,因而我们把这一个样式包括了嵌套的取舍符中。

  .options-list {
     ...
     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 。

今昔的突显结果如下图所示:

图片 18

PS:有人可能会意外为啥小编要在那边借用按钮的
.btn和 .btn-sm
类,而不是一贯把那四个类写进标记。当然也能够那么做,但考虑到链接的数额那么多,仍然经过CSS来使用样式更省心。

 

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

作者们将在LESS中利用 Font
Awesome图标在选项链接做出添加复选框,其余还要投入另五个 Font Awesome
图标,以象征悬停、聚焦和活动状态下勾选的复选框。

通过 LESS 添加图标要求从八个文件中赢得 Font Awesome 样式。首先,从
font-awesome 文件夹的 core.less
中获取基本样式。在这几个文件中,能够看看以下重点的体制:

.@{fa-css-prefix} {
  display: inline-block;
  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

以上样式是兼具 Font Awesome 图标准样品式的根底,包含作为字体的 Font Awesome
图标,以此为基础能够更进一步加强相应的体制。

对当今的须要来说,大家不须求选拔符也不需求花括号,只要求中间的条条框框。我们要把那个样式应用给选项链接。最首要的,大家要利用
:before 伪成分,因为能够确定保证结果最好。

从 core.less 中复制上边的条条框框(不包蕴选拔符),粘贴到
_product-grid.less 文件中,嵌套如下:

.grid-options { ...
  .options-list { ...
      li { ...
       a { ...
       &:before{
           display: inline-block;
           font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; 
           font-size: inherit; 
           text-rendering: auto; 
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       } ...

那么些规则为大家下一步打下了根基。下一步就足以钦定使用哪个 Font Awesome
图标了。浏览那么些页面:http://fontawesome.io/icons/
,就会发觉空复选框的图标和类名:

图片 19

以此图标的 LESS 规则能够在 font-awesome 文件夹的 icons.less
文件里找到。打开该公文,搜索字符串”}-square-o” ,能够看到上边这一行:

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

对此日前这一行,我们只须求 content: @fa-var-square-o 。把它复制到在此以前的
&:before 采纳符中的平整后面:

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

末段,大家想赢得另一部分 Font-Awesome
样式,为图标设置一定的小幅度,避免图标再切换时出现活动。这个样式能够在
font-awesome 文件夹的 fixed-width.less
文件中找到。复制下边那两行,同样粘贴到 &:before 采纳符中:

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

增加地方的体制后,编写翻译它们为CSS并刷新浏览器。能够见到作用如下:

图片 20

接下去,我们以相同的法子丰富选取符和规则,把 Font Awesome
复选框图标的勾选版应用给链接的平息、焦点和活动状态:

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

封存编辑后刷新浏览器能够看出功效如下:

图片 21

 

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

 展现效果如下:

图片 22

但有了 Bootstrap 的混入,大家用几行 LESS 就能够达成平等的功能。

(1) 首先 .options-list 采取符应用 .make-row() 混入:

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

这一个混入参预的体裁与大家在标记中添加 row
类参与的样式一样。但此间只必要一行代码。

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

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

如此就跟大家给相关的li 标签添加 col-xs-6 类的效果同样了。

 

3.6
针对平板和手提式有线电话机调整选项列表布局

我们要界定选项面板的增长幅度,让它在机械电脑中不至于太宽。

近期来看,Clearance Sale 按钮有点太宽。在 480px~768px
下,选项列表相隔太远了。

对应的截图如下:

图片 23

实则只要给选项版设置3个最大开间就行了:

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

上边大家再调整选项列表,让它们在小视口中显示为三栏。使用LESS
,能够在适当的选拔符中嵌套3个传播媒介询问,然后在里头添加2个用以调整的
.make-xs-column(4) 混入:

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

近期封存,编写翻译,刷新浏览器,查看效果。不过大家大概会意识侧边栏靠左对齐的,左侧留白太多。而且商品网格的显示有标题每行只展现了贰个货品。

图片 24

很鲜明,首先我们需求使侧边栏居中,使用 .center-block() 这么些Bootstrap
的混入就能够了,代码如下

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

其余,商品的显得难点,调节和测试发现是上一章中CSS采纳器 div[role=”main”] [class*=”col-“]撤除浮动造成的。

图片 25

据此,大家只需求不知晓浮动就能够了:

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

当今的遵循就足以了:

图片 26

 

3.7 在手提式有线电话机上折叠选项面板

现行反革命,筛选项占据了一对一对的垂直空间。那在小显示器上是个难点,会把商品网格推到页面下方很远的地点。

图片 27

原因就是筛选项不供给地占有了大批量空中。商品自己才是最应该首先展现的。大家既要让用户赶快看到商品,也足以在急需时打开筛选项。

为此,大家选择 Bootstrap
的折叠插件。上面几步讲解如何对采纳面板使用折叠插件,同时添加多少个恢弘面板的按钮,并把折叠行为限定在窄视口中。

(1) 打开 html 文书档案,添加三个div标签,包装 Clearance Sale
按钮和八个挑选列表。给那些div 添加二个特殊的类 collapse,以及三个唯一的
ID,以便 JavaScript
插件找到它,同时也添加三个同名的类,代码如下(可以参照文书档案:http://getbootstrap.com/javascript/#collapse):

<div class="grid-options col-sm-3">
   <h2>Narrow your selection</h2>
   <div id="options-panel" class="options-panel collapse">
    ...
   </div>
</div>  

(2) 保存文件并刷新浏览器。你会发觉 Clearance Sale
按钮和甄选列表从后面消灭了。只剩下选项面板上方的 h2 标题了,效果图如下:

图片 28

现行反革命急需一个切换按钮,在点击时突显筛选项。

(3) 然后我们在这一个h2标题中添加二个button按钮以及相应属性如下:

<div class="grid-options col-sm-3">
<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"> 

</button>
...

概括解释下方面包车型大巴记号:

□ 给 h2 添加的 clearfix
类可以确认保证它富含切换按钮,因为切换按钮是变化到右侧的;

□ 类 btn 和 btn-primary 会给新的按钮添加 Bootstrap
的中坚按钮样式,背景颜色为 @brand-primary;

□ 类 pull-right 会把按钮浮动到右手;

□ 在 button 成分中,放了2个 Font Awesome 齿轮图标,使用 fa-2x
类放大到两倍。

保存并刷新浏览器,能够见到呈现效果如下:

图片 29

(4)
上面要写一些平整,在中山高校显示屏中隐藏切换按钮并开始展览选项面板。为此,能够在 _product-grid.less
中拉长以下规则:

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

(5) 这个规则的成效如下:

□ 媒体询问保险只把规则应用到小中山高校视口;

□ 第三条规则抵消 collapse 类的效劳,它默许是隐藏成分;

□ 第①条则藏身切换按钮。

保留并刷新,应该就能来看想要的意义了。

在超小视口中,选项列表会折叠起来,但切换按钮可知:

图片 30

在小、中、大视口,切换按钮隐藏,选项列表可知:

图片 31

那般,大家的这些页面就竣事了。

 

4.小结

那个示例,大家做了以下工作:

□ 利用 Bootstrap
的体制神速完毕了面包屑、页面标题和分页导航,并依据供给开始展览了定制;

□ 调整了 Bootstrap
的网格样式,为商品创设了整齐的布局,关键是全数商品的高度要平等;

□ 为复杂性的 Clearance Sale 按钮应用了体制,用到了 @brand-feature
这么些革命背景;

□ 利用 btn
类的样式让筛选按钮更便于点击或触摸,通过自定义满意了作者们的例外要求;

□ 使用 Bootstrap
的分栏类,加上响应式调整,对齐了筛选项列表,而且符合多视口;

□ 在自定义样式表中借用 Font Awesome 样式在筛选项旁边添加复选框;

□ 设置了选项面板在窄视口中折叠,在小中山大学视口中可知。

 

此例展现效果地址:http://yexiaochao.github.io/show/bootstrap-code-05.html
(附《Bootstrap
实战》的PDF文档和源码链接:http://pan.baidu.com/s/1slPDoux

本例源码下载:bootstrap-code-05.zip

Leave a Comment.