hdmaturetube熟女xx视频,潮喷大喷水系列无码久久精品

首頁

web前端

html教程

【讀書筆記《Bootstrap 實戰(zhàn)》】5.電子商務(wù)網(wǎng)站

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 15, 2016 am 10:32 AM

構(gòu)建了公司網(wǎng)站之后，接下來就可以考慮設(shè)計一個在線商店了。

此次的設(shè)計以上一章的設(shè)計為基礎(chǔ)，只是添加了一個包含如下元素的新頁面：

□ 包含商品小圖、標(biāo)題和說明的產(chǎn)品網(wǎng)格；

□ 位于左側(cè)的變懶，用于按類別、品牌等篩選商品；

□ 方便用戶導(dǎo)航的面包屑和分頁鏈接。

大家先看一看Zappos (http://www.zappos.com/) 和?Amazon (https://www.amazon.com/)?的網(wǎng)站，搜索或者瀏覽一下其中的商品。此處所要創(chuàng)建的頁面，就包含與之類似的商品網(wǎng)格。

?完成后的設(shè)計在大、中、小屏幕中的效果應(yīng)該如下圖所示：

在超小屏幕上，我們希望頁面的布局變成如下所示：

Bootstrap 為完成此次設(shè)計提供了很好起點，在此基礎(chǔ)上，我們要使用LESS完成調(diào)整工作。

1.商品頁的標(biāo)記

我們可以看到頁頭、導(dǎo)航條內(nèi)容以及頁腳都和上一章的一致，主要是主內(nèi)容部分不一樣?？梢詮男Ч麍D看出，我們可以把主內(nèi)容分為三個部分：

第1部分：?用無序列表生成的面包屑導(dǎo)航鏈接。

第2部分：用 h1 表示的頁面標(biāo)題。

第3部分：

□ 一系列用于篩選商品的選項；

□ 九個商品，分別帶有小圖、標(biāo)題、說明和按鈕；

□ 用無序列表生成的分頁鏈接，位于商品之下，站點頁腳之上。

1.1?包屑導(dǎo)航鏈接

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

(1)很簡單，我們先根據(jù)文檔敲出代碼如下：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">role</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">ol </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="breadcrumb"</span><span style="color: #0000ff;">></span>
             <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
             <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Parent Category<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
             <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">></span>Current Category<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
           <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

可以看到顯示效果如下：

(2) 然后我們來自定義面包屑的設(shè)計，去掉淺灰色背景和多余的內(nèi)邊距。對于這個簡單的調(diào)整，我們可以直接修改 bootstrap 文件夾中的 breadcrumbs.less 文件，同時注釋掉不需要的行，這樣可以留下修改的痕跡：

<span style="color: #000000;">.breadcrumb {
 <span style="background-color: #ccffcc;"> padding: 0; //@breadcrumb-padding-vertical @breadcrumb-padding-horizontal;</span>
  margin-bottom: @line-height-computed;
  list-style: none;
 <span style="background-color: #ccffcc;"> //background-color: @breadcrumb-bg;</span></span>

修改后顯示效果如下：

1.2?頁面標(biāo)題

同樣，官方文檔：http://getbootstrap.com/components/#page-header （中文文檔：http://v3.bootcss.com/components/#page-header）

(1) 同樣，參考文檔，可以敲出代碼如下：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="page-header"</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Product Category Name <span style="color: #0000ff;"><span style="color: #800000;">small</span><span style="color: #0000ff;">></span>with explanatory text<span style="color: #0000ff;"></span><span style="color: #800000;">small</span><span style="color: #0000ff;">></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

可以看到顯示效果如下：

(2) 我們簡單的調(diào)整下樣式，刪除下方邊框。打開 bootstrap 文件夾中的 type.less 文件，搜索?.page-header 并把規(guī)則?border-bottom 注釋掉：

<span style="color: #000000;">.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  <span style="background-color: #ccffcc;">//border-bottom: 1px solid @page-header-border-color;</span>
}</span>

保存，編譯，刷新，就會看到更清爽的結(jié)果。更多的空白與我們整體設(shè)計保持了一致，如下所示;

1.3 側(cè)邊欄、商品網(wǎng)格、分頁鏈接

我們的主要顯示內(nèi)容就是左側(cè)的側(cè)邊欄和右側(cè)的商品網(wǎng)格，很明顯，我們用柵格系統(tǒng)把它分為兩個部分：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>                   
  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;">  <span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="products-grid col-sm-9"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

1.3.1 側(cè)邊欄

我們可以看到側(cè)邊欄由幾個標(biāo)題和對應(yīng)的篩選商品的選項以及一個超鏈接按鈕組成，我們可以先簡單的實現(xiàn)代碼如下，具體樣式，我們之后再調(diào)整。

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Narrow your selection<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="choose-clearance"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Clearance Sale<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>View clearance items<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Categories<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-categories"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 6<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 7<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 8<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 9<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 10<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Brands<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-brands"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 6<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 7<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 8<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 9<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 10<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Another Filter<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-other"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 6<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 7<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 8<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 9<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 10<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

1.3.2 商品網(wǎng)格

至于商品網(wǎng)格，我們可以看到是由九種商品的商品網(wǎng)格，以及商品網(wǎng)格下的分頁鏈接組成。

同樣，我們用柵格系統(tǒng)簡單實現(xiàn)九個商品的顯示，每行三個商品，共三列。

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

1.3.3 分頁鏈接

這個很簡單，一般使用無序列表實現(xiàn)。不過，我們可以參考分頁的官方文檔或者中文文檔，可以實現(xiàn)代碼如下：

<span style="color: #0000ff;"><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="disabled"</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">?</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1 <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #0000ff;">></span>(current)<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">?</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

顯示效果如下：

這樣主頁內(nèi)容就搭建起來了，我們需要的就是對商品網(wǎng)格和側(cè)邊欄進(jìn)行調(diào)整。

2.調(diào)整商品網(wǎng)格

我們需要把商品網(wǎng)格調(diào)整到位。之前我們使用柵格系統(tǒng)，通過?col-sm-4 類來約束每個商品的寬度，但整個網(wǎng)格看起來仍然盡不如人意。

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="product-item col-sm-4"</span><span style="color: #0000ff;">></span></span>

主要是由于商品簡介的長短的不一致，導(dǎo)致每個商品的高度不確定。因此，Bootstrap 在向左浮動所有商品時，后面的商品就可能插入到前面的商品中。結(jié)果就是整個網(wǎng)格顯得很混亂，如下圖所示：

目前，在中大型視口，第4~7個商品由于高度不等，浮動后沒有對齊。

我們的任務(wù)就是調(diào)整網(wǎng)格系統(tǒng)，讓所有網(wǎng)格的視覺效果得到增強(qiáng)。

(1) 創(chuàng)建新文件 less/_product-grid.less ，并在 __main.less 文件中引用。

(2) 我們先調(diào)整下圖片寬度、字號、內(nèi)邊距和外邊距，代碼如下：

<span style="color: #000000;">.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;
  }
}</span>

(3) 現(xiàn)在該來解決布局問題了。解決問題的關(guān)鍵是找到最高的商品。假設(shè)我們有一個指南，其中對每個商品使用什么圖片和文字介紹都有規(guī)劃。所有商品的小圖都是標(biāo)準(zhǔn)大小，文字說明也不會比當(dāng)前我們示例頁面中的多。這樣的話，我們就可以給所有商品都設(shè)置一個固定的高度，或者使用 em 或 ex 等更靈活的單位。在這個示例中，我們就使用360px 的固定值，并把超出的部分隱藏起來。

<span style="color: #000000;">.product-item {
   height: 360px;
   overflow: hidden;<br>   ...
}</span>

這樣布局問題就解決了，現(xiàn)在的顯示效果如下;

(4) 在此之后，我們就可以放心地使用 Bootstrap 的響應(yīng)式分欄類，去調(diào)整不同視口的布局效果了。具體來說，我們希望當(dāng)視口小和超小的時候，每行只顯示兩個商品；而當(dāng)視口中等或較大時，每行顯示三個商品。為實現(xiàn)這個效果，我們要找到并替換每個商品中的類，結(jié)果要變成如下所示：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="product-item <span style="background-color: #ccffcc;">col-xs-6 col-md-4</span>"</span><span style="color: #0000ff;">></span></span>

替換成這兩個類之后，每個商品在超小和小視口將會是屏幕寬度的一半，而在中大視口中將切換成屏幕寬度的三分之一。

以下是小視口下的情景：

超小視口下因為側(cè)邊欄的干擾，還是有顯示問題，所以我們接下來就需要調(diào)整側(cè)邊欄了。

3.側(cè)邊欄和篩選選項

在小、中、大視口中，側(cè)邊欄目前都位于左側(cè)。

目前側(cè)邊欄如下所示：

而在完成設(shè)計工作后，我們希望把 Clearance Sale 做成一個超大按鈕，把篩選選項排成兩欄，而且每個選項前都是復(fù)選框而非項目符號，如下所示：

下面先從基本的樣式開始，把布局弄好。

3.1 基本布局

我們先來調(diào)整字體、顏色、外邊距和內(nèi)邊距。在_product-grid.less 中添加規(guī)則如下：

<span style="color: #000000;">.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;
  }
}</span>

上面代碼的用途如下：

□ 給側(cè)邊欄應(yīng)用 Bootstrap 默認(rèn)的 panel樣式和?panel-default 樣式（參見：http://getbootstrap.com/components/#panels）；

□ 給側(cè)邊欄添加上、下邊距；

□ 調(diào)整 h2 標(biāo)題的字號、行高和顏色。

3.2 Clearance Sale 按鈕

我們要把Clearance Sale 鏈接變成一個超大的吸引人的按鈕。

按照下面的說明調(diào)整標(biāo)記：

□ 把鏈接的標(biāo)題和段落都轉(zhuǎn)換成按鈕；

□ 添加自定義的按鈕類 btn-feature，這是我們在上一章創(chuàng)建的：

□ 給整個標(biāo)簽添加 Font Awesome 圖標(biāo)，通過使用 Font Awesome 內(nèi)置的 icon-3x 類，將圖標(biāo)放大三倍。

PS:要了解 Font Awesome 特殊尺寸類的更多信息，可以參考相關(guān)文檔：http://fontawesome.io/examples/#larger

調(diào)整后的標(biāo)記如下所示：

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="<span style="background-color: #ccffcc;">btn btn-feature</span> choose-clearance"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span> <br><span style="background-color: #ccffcc;"><span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon fa fa-tag fa-3x"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span>
<span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Clearance Sale<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>View clearance items<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span></span></span></span>

顯示效果如下：

下面再細(xì)化，完成下列目標(biāo)：

(1) 將 Clearance Sale 顯示為塊級元素，使用 .center-block() 這個 Bootstrap 的混入將其居中；

(2) 強(qiáng)制其寬度為包含欄的92.5%；

(3) 添加上、下內(nèi)邊距；

(4) 覆蓋 Bootstrap 按鈕的 white-space:nowrap 規(guī)則，讓文本可以折行（Bootstrap 的white-space 規(guī)則是在 less/bootstrap/buttons.less 中定義的，關(guān)于這個屬性的更多信息，大家可以參考：https://css-tricks.com/almanac/properties/w/whitespace/）

(5) 將按鈕設(shè)置為相對定位，以便對標(biāo)簽應(yīng)用絕對定位；

(6) 調(diào)整標(biāo)題和段落的字體、顏色和外邊距；

(7) 把標(biāo)簽圖標(biāo)定位到右上角。

以上目標(biāo)通過下列規(guī)則就可以實現(xiàn)：

<span style="color: #000000;">.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;
  }
}</span>

顯示效果如下：

3.3 選項列表

本節(jié)，我們要把幾個列表轉(zhuǎn)換成篩選選項。

如果花點時間分析下在線商店 Amazon (https://www.amazon.com/)或者?Zappos (http://www.zappos.com/) 的商品篩選選項，會發(fā)現(xiàn)這些選項其實是鏈接列表，而且每個選項都被調(diào)整成了復(fù)選框的樣子。我們也要把鏈接做成復(fù)選框的樣式，用戶只要選擇就會勾選，另外我們還要調(diào)整它們以適應(yīng)多樣化的設(shè)備，包括平板電腦和智能手機(jī)。

Amazon：

Zappos ：

PS:在 Amazon 和 Zappos 等電子商務(wù)網(wǎng)站上，篩選項與內(nèi)容管理系統(tǒng)是關(guān)聯(lián)的，網(wǎng)格中的商品會隨著用戶選擇篩選項而動態(tài)變化。 Bootstrap 是一個前端設(shè)計框架，不是內(nèi)容管理系統(tǒng)。因此，我們這個示例做不到動態(tài)篩選商品。但我們這個頁面完成后，是完全可以在內(nèi)容管理系統(tǒng)中使用的。

先從每個列表的 h3 元素開始，我們調(diào)整它們的大小、行高、外邊距和顏色：

<span style="color: #000000;">.grid-options {<br>  ...
  >h3 {
    font-size: @font-size-large;
    line-height: 1.2;
    margin-top: 12px;
    color: @gray-dark;
  }
}</span>

然后，我們把注意力集中到無序列表上。我們有給每個無序列表上都添加了一個特殊的類，叫 options-list，我們就用它作為選擇符，確保只針對這些特殊的列表。

首先去掉項目符號和內(nèi)邊距：

<span style="color: #000000;">.grid-options { 
   ...
  .options-list {
    list-style-type: none;
    padding-left: 0;
  }
}</span>

接下來是鏈接樣式。稍后我們還要給列表項添加樣式，因此我們把這些樣式包含了嵌套的選擇符中。

<span style="color: #000000;">  .options-list {
     ...
     li {
       a {
          .btn;
          .btn-sm;
          padding-left: 0;
          padding-right: 0;
          color: @gray;
          &:hover,
          &:focus,
          &:active,
          .active & {
            color: @link-color;
         } ...</span>

以上規(guī)則的作用如下：

□ 我們利用 LESS 通過 .btn 類加入了基本的按鈕樣式，包括顯示 inline-block 鏈接和額外的內(nèi)邊距：

?■ 因為沒有添加其他按鈕類，所以也沒有出現(xiàn)背景顏色；

?■ 通過添加基本的按鈕樣式，可以讓用戶更方便點擊，使用手指或鼠標(biāo)皆宜。

□ 再通過 .btn-sm 類引入相關(guān)樣式，以減少內(nèi)邊距，并讓字號比標(biāo)準(zhǔn)按鈕再小一些。

□ 接著刪除無序列表的左和右內(nèi)邊距。

□ 再把鏈接文本的顏色改為 @gray。

□ 最后，設(shè)置懸停、焦點和活動鏈接的顏色為 @link-color 。

現(xiàn)在的顯示結(jié)果如下圖所示：

PS:有人可能會奇怪為什么作者要在這里借用按鈕的 .btn和 .btn-sm 類，而不是直接把這兩個類寫進(jìn)標(biāo)記。當(dāng)然也可以那么做，但考慮到鏈接的數(shù)量那么多，還是通過CSS來應(yīng)用樣式更便捷。

3.4 為選項鏈接添加 Font Awesome 圖標(biāo)復(fù)選框

我們將在LESS中使用 Font Awesome圖標(biāo)在選項鏈接做出添加復(fù)選框，另外還要加入另一個 Font Awesome 圖標(biāo)，以表示懸停、聚焦和活動狀態(tài)下勾選的復(fù)選框。

通過 LESS 添加圖標(biāo)需要從三個文件中取得 Font Awesome 樣式。首先，從 font-awesome 文件夾的 core.less 中獲得基本樣式。在這個文件中，可以看到以下重要的樣式：

<span style="color: #000000;">.@{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;
}</span>

以上樣式是所有 Font Awesome 圖標(biāo)樣式的基礎(chǔ)，包括作為字體的 Font Awesome 圖標(biāo)，以此為基礎(chǔ)可以進(jìn)一步加強(qiáng)相應(yīng)的樣式。

對現(xiàn)在的需求來說，我們不需要選擇符也不需要花括號，只需要其中的規(guī)則。我們要把這些樣式應(yīng)用給選項鏈接。最重要的，我們要使用 :before 偽元素，因為可以確保結(jié)果最佳。

從 core.less 中復(fù)制上面的規(guī)則（不包括選擇符），粘貼到 _product-grid.less 文件中，嵌套如下：

<span style="color: #000000;">.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;
       } ...</span>

這些規(guī)則為我們下一步打下了基礎(chǔ)。下一步就可以指定使用哪個 Font Awesome 圖標(biāo)了。瀏覽這個頁面：http://fontawesome.io/icons/ ，就會發(fā)現(xiàn)空復(fù)選框的圖標(biāo)和類名：

這個圖標(biāo)的 LESS 規(guī)則可以在 font-awesome 文件夾的 icons.less 文件里找到。打開該文件，搜索字符串"}-square-o" ，可以看到下面這一行：

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

對于前面這一行，我們只需要?content: @fa-var-square-o 。把它復(fù)制到之前的 &:before 選擇符中的規(guī)則后面：

<span style="color: #000000;">&:before{ ...
  content: @fa-var-square-o; 
}</span>

最后，我們想取得另一些 Font-Awesome 樣式，為圖標(biāo)設(shè)置固定的寬度，避免圖標(biāo)再切換時出現(xiàn)位移。這些樣式可以在 font-awesome 文件夾的 fixed-width.less 文件中找到。復(fù)制下面這兩行，同樣粘貼到 &:before 選擇符中：

<span style="color: #000000;">  width: (18em / 14);
  text-align: center;</span>

添加上面的樣式后，編譯它們?yōu)镃SS并刷新瀏覽器?？梢钥吹叫Ч缦?

接下來，我們以同樣的方式添加選擇符和規(guī)則，把 Font Awesome 復(fù)選框圖標(biāo)的勾選版應(yīng)用給鏈接的懸停、焦點和活動狀態(tài)：

<span style="color: #000000;">.options-list { ...
  li { ...
    a { ...
      &:hover:before,
      &:focus:before,
       &:active:before,
      .active &:before {
         content: @fa-var-check-square-o; 
}</span>

保存編輯后刷新瀏覽器可以看到效果如下：

3.5 使用 LESS 混入在欄中對其選項

前面，我們使用 LESS 實現(xiàn)了以往需要通過添加標(biāo)記實現(xiàn)的功能。考慮到篩選項的數(shù)量很多，這樣做效率最高。同樣的思路也適用于我們對齊側(cè)邊欄中的選項。

當(dāng)然，如果使用 Bootstrap 的 row 和欄類，通過調(diào)整標(biāo)記也是可以的：

<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="options-list options-categories row"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-xs-6"</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-xs-6"</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Option 2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
  ...</span></span></span></span></span></span>

?顯示效果如下：

但有了 Bootstrap 的混入，我們用幾行 LESS 就可以實現(xiàn)同樣的效果。

(1) 首先 .options-list 選擇符應(yīng)用 .make-row() 混入：

<span style="color: #000000;">.options-list {
  .make-row();
  ...</span>

這個混入加入的樣式與我們在標(biāo)記中添加 row 類加入的樣式一樣。但這里只需要一行代碼。

(2) 然后使用 .make-xs-col() 混入給列表項應(yīng)用分欄規(guī)則：

<span style="color: #000000;">  .options-list { ...
     li {
       .make-xs-column(6);
       ...</span>

這樣就跟我們給相關(guān)的li 標(biāo)簽添加 col-xs-6 類的效果一樣了。

3.6 針對平板和手機(jī)調(diào)整選項列表布局

我們要限制選項面板的寬度，讓它在平板電腦中不至于太寬。

目前來看，Clearance Sale 按鈕有點太寬。在 480px~768px 下，選項列表相隔太遠(yuǎn)了。

相應(yīng)的截圖如下：

其實只要給選項版設(shè)置一個最大寬度就行了：

<span style="color: #000000;">.grid-options {
   ...
   max-width: 480px; 
   ...</span>

下面我們再調(diào)整選項列表，讓它們在小視口中顯示為三欄。使用LESS ，可以在適當(dāng)?shù)倪x擇符中嵌套一個媒體查詢，然后在其中添加一個用于調(diào)整的 .make-xs-column(4) 混入：

<span style="color: #000000;">li {
  .make-xs-column(6);
<span style="background-color: #ccffcc;"> @media screen and (max-width:@screen-xs-max){
    .make-xs-column(4);
   }<br></span>   ...</span>

現(xiàn)在保存，編譯，刷新瀏覽器，查看效果。但是我們可能會發(fā)現(xiàn)側(cè)邊欄靠左對齊的，右側(cè)留白太多。而且商品網(wǎng)格的顯示有問題每行只顯示了一個商品。

很明顯，首先我們需要使側(cè)邊欄居中，使用?.center-block() 這個Bootstrap 的混入就可以了，代碼如下

<span style="color: #000000;">.grid-options {
   ...
   .center-block();</span>

另外，商品的顯示問題，調(diào)試發(fā)現(xiàn)是上一章中CSS選擇器?div[role="main"]?[class*="col-"]清除浮動造成的。

所以，我們只需要不清楚浮動就可以了：

<span style="color: #000000;">.product-item { 
  ...
  clear:none !important;
  ...</span>

現(xiàn)在的效果就可以了：

3.7 在手機(jī)上折疊選項面板

現(xiàn)在，篩選項占據(jù)了相當(dāng)對的垂直空間。這在小屏幕上是個問題，會把商品網(wǎng)格推到頁面下方很遠(yuǎn)的地方。

原因就是篩選項不必要地占據(jù)了大量空間。商品本身才是最應(yīng)該首先顯示的。我們既要讓用戶迅速看到商品，也可以在需要時打開篩選項。

為此，我們使用 Bootstrap 的折疊插件。下面幾步講解如何對選項面板使用折疊插件，同時添加一個擴(kuò)展面板的按鈕，并把折疊行為限定在窄視口中。

(1) 打開 html 文檔，添加一個div標(biāo)簽，包裝 Clearance Sale 按鈕和三個選項列表。給這個div 添加一個特殊的類 collapse，以及一個唯一的 ID，以便 JavaScript 插件找到它，同時也添加一個同名的類,代碼如下（可以參考文檔：http://getbootstrap.com/javascript/#collapse）：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Narrow your selection<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
  <span style="background-color: #ccffcc;"> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="options-panel"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="options-panel collapse"</span><span style="color: #0000ff;">></span></span><span style="color: #000000;">
    ...
   </span><span style="background-color: #ccffcc;"><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  </span></span></span>

(2) 保存文件并刷新瀏覽器。你會發(fā)現(xiàn) Clearance Sale 按鈕和選項列表從眼前消失了。只剩下選項面板上方的 h2 標(biāo)題了，效果圖如下：

現(xiàn)在需要一個切換按鈕，在點擊時顯示篩選項。

(3) 然后我們在這個h2標(biāo)題中添加一個button按鈕以及相應(yīng)屬性如下：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="grid-options col-sm-3"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h2 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span><span style="color: #0000ff;">></span><span style="color: #000000;">Narrow your selection
  </span><span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="options-panel-toggle btn btn-primary pull-right"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="collapse"</span><span style="color: #ff0000;"> data-target</span><span style="color: #0000ff;">="#options-panel"</span><span style="color: #0000ff;">></span> <br><span style="color: #0000ff;">  <span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon fa fa-cog fa-2x"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span><span style="color: #000000;">
...</span></span></span></span></span>

簡單解釋下上面的標(biāo)記：

□ 給 h2 添加的 clearfix 類可以確保它包含切換按鈕，因為切換按鈕是浮動到右邊的；

□ 類 btn 和 btn-primary 會給新的按鈕添加 Bootstrap 的基本按鈕樣式，背景顏色為 @brand-primary；

□ 類 pull-right 會把按鈕浮動到右側(cè)；

□ 在 button 元素中，放了一個 Font Awesome 齒輪圖標(biāo)，使用 fa-2x 類放大到兩倍。

保存并刷新瀏覽器，可以看到顯示效果如下：

(4) 下面要寫一些規(guī)則，在中大屏幕中隱藏切換按鈕并展開選項面板。為此，可以在?_product-grid.less 中添加以下規(guī)則：

<span style="color: #000000;">@media (min-width:@screen-sm-min){
  .options-panel{
    display:block;
  }
  .options-panel-toggle {
    display:none;
  }
}</span>

(5) 這些規(guī)則的作用如下：

□ 媒體查詢保證只把規(guī)則應(yīng)用到小中大視口；

□ 第一條規(guī)則抵消 collapse 類的作用，它默認(rèn)是隱藏元素；

□ 第二條則隱藏切換按鈕。

保存并刷新，應(yīng)該就能看到想要的效果了。

在超小視口中，選項列表會折疊起來，但切換按鈕可見：