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

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

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

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

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

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

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

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

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

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

我們可以看到頁(yè)頭、導(dǎo)航條內(nèi)容以及頁(yè)腳都和上一章的一致，主要是主內(nèi)容部分不一樣。可以從效果圖看出，我們可以把主內(nèi)容分為三個(gè)部分：

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

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

第3部分：

□ 一系列用于篩選商品的選項(xiàng)；

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

□ 用無(wú)序列表生成的分頁(yè)鏈接，位于商品之下，站點(diǎn)頁(yè)腳之上。 

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

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

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

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

可以看到顯示效果如下：

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

.breadcrumb {
 padding: 0; //@breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
 margin-bottom: @line-height-computed;
 list-style: none;
 //background-color: @breadcrumb-bg;

修改后顯示效果如下：

1.2 頁(yè)面標(biāo)題

同樣，官方文檔：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>

可以看到顯示效果如下：

(2) 我們簡(jiǎn)單的調(diào)整下樣式，刪除下方邊框。打開 bootstrap 文件夾中的 type.less 文件，搜索 .page-header 并把規(guī)則 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;
}

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

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

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

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

1.3.1 側(cè)邊欄

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

<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 商品網(wǎng)格

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

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

<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 分頁(yè)鏈接

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

<nav>
 <ul class="pagination">
 <li class="disabled"><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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>

顯示效果如下：

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

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

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

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

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

目前，在中大型視口，第4~7個(gè)商品由于高度不等，浮動(dòng)后沒有對(duì)齊。

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

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

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

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

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

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

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

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

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

以下是小視口下的情景：

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

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

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

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

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

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

3.1 基本布局

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

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

上面代碼的用途如下：

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

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

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

3.2 Clearance Sale 按鈕

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

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

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

□ 添加自定義的按鈕類 btn-feature，這是我們?cè)谏弦徽聞?chuàng)建的：

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

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

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

<a class="btn btn-feature choose-clearance" href="#"> 
<span class="icon fa fa-tag fa-3x"></span>
<h3>Clearance Sale</h3>
<p>View clearance items</p>
</a>

顯示效果如下：

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

(1) 將 Clearance Sale 顯示為塊級(jí)元素，使用 .center-block() 這個(gè) 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)于這個(gè)屬性的更多信息，大家可以參考：https://css-tricks.com/almanac/properties/w/whitespace/）

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

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

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

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

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

顯示效果如下：

3.3 選項(xiàng)列表

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

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

Amazon：

Zappos ：

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

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

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

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

首先去掉項(xiàng)目符號(hào)和內(nèi)邊距：

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

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

 .options-list {
 ...
 li {
 a {
 .btn;
 .btn-sm;
 padding-left: 0;
 padding-right: 0;
 color: @gray;
 &:hover,
 &:focus,
 &:active,
 .active & {
 color: @link-color;
 } ...

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

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

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

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

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

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

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

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

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

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

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

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

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

.@{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 圖標(biāo)樣式的基礎(chǔ)，包括作為字體的 Font Awesome 圖標(biāo)，以此為基礎(chǔ)可以進(jìn)一步加強(qiáng)相應(yīng)的樣式。

對(duì)現(xiàn)在的需求來(lái)說(shuō)，我們不需要選擇符也不需要花括號(hào)，只需要其中的規(guī)則。我們要把這些樣式應(yīng)用給選項(xiàng)鏈接。最重要的，我們要使用 :before 偽元素，因?yàn)榭梢源_保結(jié)果最佳。

從 core.less 中復(fù)制上面的規(guī)則（不包括選擇符），粘貼到 _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;
 } ...

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

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

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

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

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

  width: (18em / 14);
  text-align: center;
添加上面的樣式后，編譯它們?yōu)镃SS并刷新瀏覽器?？梢钥吹叫Ч缦?

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

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

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

3.5 使用 LESS 混入在欄中對(duì)其選項(xiàng)

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

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

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

顯示效果如下：

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

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

.options-list {
  .make-row();
  ...
這個(gè)混入加入的樣式與我們?cè)跇?biāo)記中添加 row 類加入的樣式一樣。但這里只需要一行代碼。

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

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

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

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

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

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

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

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

下面我們?cè)僬{(diào)整選項(xiàng)列表，讓它們?cè)谛∫暱谥酗@示為三欄。使用LESS ，可以在適當(dāng)?shù)倪x擇符中嵌套一個(gè)媒體查詢，然后在其中添加一個(gè)用于調(diào)整的 .make-xs-column(4) 混入：

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

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

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

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

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

所以，我們只需要不清楚浮動(dòng)就可以了：

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

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

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

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

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

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

(1) 打開 html 文檔，添加一個(gè)div標(biāo)簽，包裝 Clearance Sale 按鈕和三個(gè)選項(xiàng)列表。給這個(gè)div 添加一個(gè)特殊的類 collapse，以及一個(gè)唯一的 ID，以便 JavaScript 插件找到它，同時(shí)也添加一個(gè)同名的類,代碼如下（可以參考文檔：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) 保存文件并刷新瀏覽器。你會(huì)發(fā)現(xiàn) Clearance Sale 按鈕和選項(xiàng)列表從眼前消失了。只剩下選項(xiàng)面板上方的 h2 標(biāo)題了，效果圖如下：

現(xiàn)在需要一個(gè)切換按鈕，在點(diǎn)擊時(shí)顯示篩選項(xiàng)。

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

<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"> 
 <span class="icon fa fa-cog fa-2x"></span> 
</button>
...

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

□ 給 h2 添加的 clearfix 類可以確保它包含切換按鈕，因?yàn)榍袚Q按鈕是浮動(dòng)到右邊的；

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

□ 類 pull-right 會(huì)把按鈕浮動(dòng)到右側(cè)；

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

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

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

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

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

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

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

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

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

在超小視口中，選項(xiàng)列表會(huì)折疊起來(lái)，但切換按鈕可見：

在小、中、大視口，切換按鈕隱藏，選項(xiàng)列表可見：

這樣，我們的這個(gè)頁(yè)面就完工了。 

4.小結(jié)

這個(gè)示例，我們做了以下事情：

□ 利用 Bootstrap 的樣式快速實(shí)現(xiàn)了面包屑、頁(yè)面標(biāo)題和分頁(yè)導(dǎo)航，并根據(jù)需要進(jìn)行了定制；

□ 調(diào)整了 Bootstrap 的網(wǎng)格樣式，為商品創(chuàng)建了整齊的布局，關(guān)鍵是所有商品的高度要一致；

□ 為復(fù)雜的 Clearance Sale 按鈕應(yīng)用了樣式，用到了 @brand-feature 這個(gè)紅色背景；

□ 利用 btn 類的樣式讓篩選按鈕更容易點(diǎn)擊或觸摸，通過(guò)自定義滿足了我們的特殊需求；

□ 使用 Bootstrap 的分欄類，加上響應(yīng)式調(diào)整，對(duì)齊了篩選項(xiàng)列表，而且適合多視口；

□ 在自定義樣式表中借用 Font Awesome 樣式在篩選項(xiàng)旁邊添加復(fù)選框；

□ 設(shè)置了選項(xiàng)面板在窄視口中折疊，在小中大視口中可見。 

此例顯示效果地址：http://ycdoit.com/show/bootstrap-code-05.html （附《Bootstrap 實(shí)戰(zhàn)》的PDF文檔和源碼鏈接：http://xiazai.jb51.net/201610/yuanma/BootstrapSite(jb51.net).rar）

本例源碼下載：bootstrap-code-05.zip

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。