Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站

2019-11-20 08:42:27

字體：大中小

供稿：網(wǎng)友

我們已經(jīng)掌握了很多實(shí)用 Bootstrap 的重要技能。現(xiàn)在，是時(shí)候拿出更多的創(chuàng)意來幫助客戶實(shí)現(xiàn)他們?nèi)轿辉诰€營銷的愿望了。此次將帶領(lǐng)大家做一個(gè)漂亮的單頁高端營銷網(wǎng)站。

主要任務(wù)如下：

□ 一個(gè)大型介紹性傳送帶圖片展示區(qū)，配有自定義的響應(yīng)式歡迎信息；

□ 一個(gè)客戶留言區(qū)，顯示為帶標(biāo)題的圖片墻，就像磚壘的一樣；

□ 一個(gè)功能清單，使用大號 Font Awesome 圖標(biāo)；

□ 一個(gè)帶有自定義價(jià)目表的注冊區(qū)；

□ 一個(gè)帶動態(tài)滾動的 ScrollSpy 導(dǎo)航條。

1.概況

有一位潛在客戶聯(lián)系我們，她深深愛上了一種漂亮的網(wǎng)站，就是那種可以垂直滾動，以強(qiáng)烈的視覺沖擊力展示商品，最后還有一個(gè)突出的行動召喚按鈕的單頁網(wǎng)站。她想讓你做一個(gè)。

這位客戶知識淵博、目光如炬。她經(jīng)常光顧https://onepagelove.com/，并且收集了一堆最喜歡的功能，包括：

□ 一個(gè)清新，具有現(xiàn)代美的網(wǎng)站；

□ 一條介紹性的歡迎語，打在吸引人的背景圖片上；

□ 一個(gè)高效的商品展示區(qū)，用醒目的圖標(biāo)來突出；

□ 精致的客戶留言板，深具視覺沖擊力；

□ 三個(gè)能讓客戶一目了然的價(jià)目表，方便選擇，快捷注冊；

□ 不斷溝通！一切都在吸引用戶一步一步向下看，讓人幾乎無法拒絕點(diǎn)擊最后的注冊按鈕。

為了保持她未來產(chǎn)品的神秘感，我們的客戶沒有為我們提供實(shí)際的商品和服務(wù)圖。她給了我們一個(gè)設(shè)計(jì)圖，設(shè)計(jì)圖中使用了占位圖片。

第一部分將是一張橫貫全屏的高清圖片，上面有一條大大的歡迎語，以及一個(gè)邀請向下滾動閱讀的按鈕，如下圖所示：

第二部分將列出商品的六個(gè)重要功能，分成三欄，并配備了相應(yīng)的圖標(biāo)，如下圖所示：

第三部分展示客戶的贊譽(yù)，有圖片，有文字，以圖片墻形式呈現(xiàn)：

第四部分也是最后一部分，提供了三個(gè)可以選的方案，每個(gè)方案對應(yīng)相對的報(bào)價(jià)，同時(shí)在視覺上突出中間的報(bào)價(jià)方案，如下圖所示：

真是一位與時(shí)俱進(jìn)的客戶，所以她最后還要求我們的方案必須完美地適應(yīng)平板電腦和智能手機(jī)。

2.初始文件

跟前面幾篇文章一樣，文件的核心是 Bootstrap 3 LESS、JavaScript和按照要求組織的標(biāo)記，搭配了 HTML5 Boilerplate 和 Font Awesome 圖標(biāo)字體。

項(xiàng)目的文件夾和上一章的項(xiàng)目保持一致。下面我們簡單回顧下 LESS 文件。

□ 默認(rèn)的 Bootstrap 文件位于 /less/bootstrap/文件夾。

□ Font Awesome 圖標(biāo)字體的 LESS 文件位于 /less/font-awesome/ 。

□ 我們自定義的 LESS 文件就在less 文件夾中，以下劃線開頭，一眼就能看出來。自定義的 LESS 文件如下：

■__main.less：這是導(dǎo)入所有其他文件的主文件，應(yīng)該把它編譯為 css/main.css；

■_variables.less：這個(gè)文件基于 Bootstrap 定義的變量新增了一些變量；

■_navbar.less：這個(gè)文件包含導(dǎo)航條的自定義樣式；

■_page-content.less：這個(gè)文件包含頁面內(nèi)容區(qū)的自定義樣式；

■_footer.less：這個(gè)文件包含頁腳的自定義樣式。

3.了解頁面內(nèi)容

根據(jù)需求，我們可以把頁面分為六部分：

□ 固定在頂部的導(dǎo)航條；

□ 帶一句大號歡迎語的高清圖；

□ 功能介紹，包括圖標(biāo)、標(biāo)題、文字，分為三欄；

□ Impact 部分是成功用戶的照片，占位文本代表他們的贊譽(yù)；

□ Sign up Now!部分是三張價(jià)目表，包括Basic Plan、 Premium Plan 和 Pro Plan，每個(gè)下面都有一個(gè) Sign up Now! 按鈕；

□ 頁腳的 Logo。

<header role="banner"></header><div role="main">  <!-- INTRO SECTION --> <section id="welcome" ></section> <!-- FEATURES SECTION --> <section id="features"></section> <!-- IMPACT SECTION --> <section id="impact" ></section> <!-- SIGNUP SECTION --> <section id="signup" ></section></div><footer role="contentinfo"></footer>

4.導(dǎo)航條

根據(jù)之前的可以簡單實(shí)現(xiàn)導(dǎo)航條部分：

<header role="banner"> <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container">  <div class="navbar-header">  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">    <span class="icon-bar"></span>    <span class="icon-bar"></span>    <span class="icon-bar"></span>   </button>  <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120"></a> </div>  <div class="navbar-collapse collapse">  <ul class="nav navbar-nav">   <li class="active"><a href="#welcome">Welcome</a></li>   <li><a href="#features">Features</a></li>   <li><a href="#impact">Impact</a></li>   <li><a href="#signup">Sign Up</a></li>  </ul>  </div>  <!--/.nav-collapse -->  </div> <!--/.container -->  </nav></header>

目前中、大視口的顯示效果如下：

小視口的顯示效果如下：

我們需要改變下樣式。

(1) 我們先打開 _navbar.less 調(diào)整下樣式，我們需要把折疊按鈕移回右側(cè)：

.navbar-toggle { ... float: right;  margin-right: @navbar-padding-horizontal;  ...

然后調(diào)整下折疊按鈕，與左側(cè)的圖標(biāo)以及導(dǎo)航條保持一致：

// Bars .icon-bar { display: block; width: 24px; //edited height: 3px; //edited border-radius:0; //edited }

接著我們修改下，中、大視口下導(dǎo)航條標(biāo)簽的內(nèi)邊距：

// Uncollapse the nav @media (min-width: @grid-float-breakpoint) { ... > li { ...  > a {  padding-top: ((@navbar-height - @line-height-computed) / 2);  padding-bottom: ((@navbar-height - @line-height-computed) / 2);  padding-left: 24px; // added  padding-right: 24px; // added  text-transform: uppercase; // added  } ...

(2) 接著，我們打開_variables.less 文件，調(diào)整針對導(dǎo)航條的變量。

我們調(diào)整下導(dǎo)航條的高度：

// Basics of a navbar@navbar-height: 56px; // edited

然后，修改下小視口導(dǎo)航條的顏色和懸停顏色：

// Navbar links@navbar-default-link-color:    @navbar-default-color;@navbar-default-link-hover-color:   #fff; // edited@navbar-default-link-hover-bg:    @gray; // edited@navbar-default-link-active-color:   #fff; // edited@navbar-default-link-active-bg:   @gray-dark; // edited...

現(xiàn)在，小視口的效果如下：

(3) 然后，我們打開 __main.less文件去掉之前導(dǎo)入的，但現(xiàn)在不需要的LESS文件。

//Other custom files @import "_page-content.less";@import "_footer.less";//@import "_banner.less";//@import "_buttons-custom.less";

現(xiàn)在，中、大視口的效果如下：

5.頁腳

代碼很簡單，和之前一樣：

<footer role="contentinfo"> <div class="container"> <p class="footer-brand">  <a href="bootstrap-code-06.html">  <img src="img/logo.png" width="80" alt="Bootstrappin'">  </a>  </p> </div></footer>

我們需要簡單的修改下樣式，打開 _footer.less文件，去掉之前的字體大小樣式和藍(lán)色背景：

footer[role="contentinfo"] { padding-top: 20px; padding-bottom: 20px; //font-size:@font-size-small; //background-color:darken(@navbar-inverse-bg,18%); ...

這樣就可以了，顯示效果如下：

6.定制高清圖

下面我們可以實(shí)現(xiàn)主內(nèi)容部分了。我們先自定義高清圖，顯示客戶的大號歡迎語，同時(shí)要對標(biāo)記進(jìn)行一番調(diào)整。包括添加大背景圖，放大歡迎語，然后調(diào)整其在多視口中的外觀。

我們簡單實(shí)現(xiàn)內(nèi)部代碼：

<section id="welcome" class="jumbotron">  <div class="container">   <h1><strong>Big</strong> Welcome Message</h1>   <p>Ingenious marketing copy. And some <em>more</em> ingenious marketing copy.    <a href="#features" class="btn btn-lg btn-primary pull-right">     Learn more <span class="icon fa fa-arrow-circle-down"></span></a></p>  </div> </section>

顯示效果如下：

我們需要做的第一步就是擴(kuò)大顯示區(qū)的高度，把高清圖放進(jìn)去。

(1) 打開 less/_page-content.less 文件，設(shè)置 #welcome 部分的高度、背景顏色和字體顏色，同時(shí)也為按鈕添加一些上外邊距：

#welcome { height: 300px; background-color: #191919; color: #fff; .btn { margin-top: 16px; }}

接下來，我們使用媒體查詢?yōu)橹写笃聊惶砑颖尘皥D片（根據(jù)目前 Bootstrap 媒體查詢默認(rèn)的斷點(diǎn)值，大屏幕指 991px 以上）。

(2) 我們先利用LESS，在#welcome 的上下文中嵌套一個(gè)媒體查詢。

#welcome {  ... @media (max-width: @screen-sm-max) { background: #191919 url('../img/subway-906x600.jpg') center center no-repeat; }}

現(xiàn)在可以顯示背景圖了，但是只會在非大視口（默認(rèn)值屏幕寬度為911px 或更小）才會顯示：

(3) 然后我們擴(kuò)展下平板大小視口下高清圖的高度。為此，要使用斷點(diǎn) @screen-sm-min 寫一個(gè)媒體查詢，（即視口在 768px ~ 991px 之間時(shí)）把 #welcome 元素的高度變?yōu)?480px：

#welcome { ... @media (min-width: @screen-sm-min) { height: 480px; }}

(4) 接下來考慮大視口，此時(shí)把高清圖變成540px 高。在這個(gè)寬度下，我們使用更大的背景圖片subway-1600x1060.jpg，同時(shí)把 background-size設(shè)置為 cover:

#welcome { ... @media (min-width: @screen-md-min) { height: 540px; background: #191919 url('../img/subway-1600x1060.jpg') center center no-repeat; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }}

有了這些樣式，當(dāng)視口變大時(shí)，就會顯示1600px 寬的背景圖片了。

接下來，我們?yōu)闅g迎語添加樣式，使其突出出來。

調(diào)整歡迎語

客戶希望高清圖上的歡迎語超級大。Bootstrap 的高清圖樣式把原字號增大了1.5倍，我們還要再增大一些。還要在寬屏中約束歡迎語的寬度，并在其下方襯托一個(gè)半透明的盒子。

目前的結(jié)果在小屏幕中表現(xiàn)已經(jīng)很好了：

不過還是可以改進(jìn)了。那就是在本文底下襯托一個(gè)半透明的黑盒子。

(1) 打開 html文檔，高清圖 container 類內(nèi)部，添加一個(gè)新的類 welcome-message 的 div 元素，把里面的h1 標(biāo)題和段落包含起來：

<section id="welcome" class="jumbotron">  <div class="container">   ...  </div> </section>

(2) 接著，為這個(gè) div 添加樣式，分以下幾步：

□ 使用 HSLA 添加半透明黑色背景；

□ 將其設(shè)為絕對定位，并通過上、下、左、右設(shè)置為0，將其拉伸至高清圖一樣大小；

□ 使用 #welcome 將高清圖設(shè)置為相對定位，以便確定歡迎語的位置；

□ 給歡迎語添加內(nèi)邊距；

□ 使用原有的 strong 標(biāo)簽把“Big”變成大寫，同時(shí)增大字號。

#welcome { ... position: relative; .welcome-message { background-color: hsla(0,0,1%,0.4); position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30px 40px; strong {  font-size: 1.5em;  text-transform: uppercase; } ...

(3) 保存文件，編譯CSS，然后刷新瀏覽器。應(yīng)該就能看到背景變暗了，文本在這個(gè)深色背景上也更加引人注目，效果圖如下：

(4) 下一步，要考慮 @screen-sm 斷點(diǎn)。前面我們已經(jīng)為這個(gè)斷點(diǎn)寫過媒體查詢，我們在其基礎(chǔ)上添加一些規(guī)則，完成以下任務(wù)：

□ 把高清圖的 container 設(shè)置為相對定位，使其成為新的定位參照點(diǎn)，以便我們從上方和左側(cè)向內(nèi)縮小歡迎語的盒子；

□ 右側(cè)向內(nèi)縮小20%；

□ 將底邊設(shè)置為 auto，以便盒子能收縮適應(yīng)內(nèi)容；

□ 將“Big”設(shè)置為塊級元素，單獨(dú)顯示在一行上。

@media (min-width: @screen-sm-min) { height: 480px; .container {  position: relative; } .welcome-message {  right: 20%;  bottom: auto;  strong {  display: block;  } } }

現(xiàn)在，平板大小視口下，顯示效果如下：

(5) 最后，再針對大視口做調(diào)整。在大視口中，我們想限制以下歡迎語盒子的寬度。這次要用到之前針對斷點(diǎn) @screen-md-min 創(chuàng)建的媒體查詢：

 @media (min-width: @screen-md-min) { ... .welcome-message {  right: 50%; } }

顯示效果如下：

這樣，我們自定義的高清大圖就此完成，滿足了客戶顯示超大歡迎語的要求，同時(shí)還能適應(yīng)平板、手機(jī)等設(shè)備的屏幕。

7.功能列表

功能列表部分，就是6個(gè)包含圖標(biāo)、標(biāo)題和簡短文字描述的功能列表，加上一個(gè)大的標(biāo)題組成，我們可以先通過柵格系統(tǒng)（Grid system）實(shí)現(xiàn)基本代碼如下：

<!-- FEATURES SECTION --> <section id="features">  <div class="container">   <h1>Features</h1>   <div class="row">    <div class="features-item col-md-4">     <span class="icon fa fa-cloud"></span>     <h2>Feature 1</h2>     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>    </div>     ...   </div>  </div> </section>

目前在大屏幕下，顯示效果如下：

很明顯，我們的目標(biāo)是增大圖標(biāo)，居中對齊文本，然后平整網(wǎng)格。

(1) 打開 _page-content.less 文件，新開辟一塊，并添加注釋，表明是功能區(qū)的樣式：

// Features Section#features {}

(2) 首先針對 .features-item 部分，居中文本，添加內(nèi)邊距，并設(shè)定高度以避免浮動的功能相互交錯(cuò)，同時(shí)將 .icon 字體增大為90px：

#features { .features-item { text-align: center; padding: 20px; height: 270px; clear: none; .icon {  font-size: 90px; } }}

現(xiàn)在的效果如下：

(3) 下面針對平板等小視口調(diào)整功能列表。當(dāng)前，每個(gè) .features-item 都有類 col-md-4，而我們希望在小屏幕中功能列表顯示為兩欄，相應(yīng)的要添加類 col-sm-6 ：

<div class="features-item col-md-4 col-sm-6">

其前后顯示效果如下圖所示：

(4) 再小一些，在超小視口中，功能項(xiàng)會自己變成一欄。

(5) 但是，在超小屏幕范圍之上，即500 ~ 767px 的時(shí)候，一欄的布局會導(dǎo)致文本描述太寬：

(6) 解決這個(gè)問題，只需要再添加一個(gè)媒體查詢，為 .features-item 設(shè)置最大寬度，同時(shí)應(yīng)用 Bootstrap 的 .center-block() 混入：

#features { .features-item { ... @media (max-width:@screen-xs-max){  max-width: 320px;  .center-block(); } ...

有了以上限制，.features-item 元素在任何視口中都會保存理想的寬度了！

8.用戶評論區(qū)

接下的部分就是用戶評論區(qū)了，用來展示成功用戶的評論。在這一部分，我們看到的是成功用戶的笑臉，還有他們對我們客戶商品的贊美之詞。可以從前面的效果圖看到是由若干條評論組成。每條評論都包含了用戶的圖片、評論以及用戶名稱。

<!-- IMPACT SECTION --> <section id="impact">  <div class="container">   <h1>Impact</h1>   <div class="reviews">    <div class="hreview review-item-1 thumbnail">     <img src="img/smiling1-by-RomainGuy-600x900.jpg" alt="Customer Photo1">     <div class="caption">      <blockquote class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.       Proin euismod, nulla pretium commodo ultricies</p></blockquote>      <p class="reviewer">Smiling Customer1</p>     </div><!-- /.caption -->    </div><!-- /.hreview -->     ...   </div><!-- /.reviews -->  </div><!-- /.container --> </section>

這里每一條評論都使用了上面這樣的 hreview 微格式標(biāo)記。hreview 微格式相關(guān)參考示例和介紹地址：http://microformats.org/wiki/hreview

為了方便布局和添加樣式，我們使用了 Bootstrap 的 thumbnail 類結(jié)構(gòu)，這個(gè)結(jié)構(gòu)有以下好處：

□ 在每條評論的父元素中，我們都會在 hreview 類旁邊再添加一個(gè) thumbnail 類；

□ 評論內(nèi)容，包括引用的話和評論者的名字，都包含在 div 中。

這種縮略圖（thumbnail）和說明（caption）結(jié)構(gòu)對每條評論給出了整體封裝。Bootstrap 的縮略圖樣式就是用來在我們期望的布局中顯示圖片和說明比例的。

我們知道，用戶評論區(qū)最終要做成一面圖片墻的樣子，圖片有豎也有橫。為了讓照片中的臉部都露出來，同時(shí)有地方疊加文字，我們把所有的圖片都處理成了同樣寬。

沒有 Bootstrap 的布局類，這些圖片就從上到下依次排列。如果把窗口縮小到大約320~400px，可以看到它們垂直排列成一欄的樣子，如下圖所示;

在針對大視口調(diào)整布局之前，我們先來為說明元素添加樣式。

8.1 定位及美化說明

我們要把說明元素放到對應(yīng)用戶照片的上面。

(1) 打開 _page-content.less 文件中，添加針對 #impact 部分的注釋：

// Impact Section#impact { }

(2) 然后為每個(gè) .hreview 元素添加必要的樣式，為下一步定位打下基礎(chǔ)。這里添加了相對定位、內(nèi)邊距，去掉了 Bootstrap 縮略圖默認(rèn)的邊框，并防止清除浮動的影響：

#impact { .hreview { position: relative; padding: 0 10px; border: none; clear: none; }}

(3) 接著我們?yōu)檎f明元素添加樣式。在每張圖片上添加半透明的背景，并將其絕對定位到圖片底部：

#impact { ... .caption {  position: absolute;  top: auto;  left: 10px;  right: 10px;  bottom: 0;  line-height: 1.1;  background: hsla(0,0,10%,0.55); }

(4) 接著，去掉 blockquote 和 .reviewer 元素不必要的外邊距和內(nèi)邊距，按我們的需要重新設(shè)置：

#impact { ... .caption { ...  blockquote,  .reviewer {  margin: 0 6px;  padding: 0;  }

(5) 下面就是評論文字了，我們要指定外邊距、邊框、字體、字號和顏色：

blockquote {  margin-top: 4px;  border: none;  font-family: @font-family-serif;  font-size: @font-size-large;  color: #fff;  }

(6) 下面再給評論者的名字指定樣式，應(yīng)該定位到評論內(nèi)容之下：

.reviewer {  margin-top: 2px;  margin-bottom: 4px;  text-align: right;  color: @gray-lighter;  }

現(xiàn)在的顯示效果如下：

8.2 調(diào)整說明元素的位置

看看每張圖片上的可用空間，再在不同視口寬度下檢查一下響應(yīng)式網(wǎng)格中疊加文本的變化情況。你會發(fā)現(xiàn)自己需要針對每個(gè)說明元素設(shè)置樣式，以保證對相應(yīng)圖片位置最合適。

這就是 review-item-1、review-item-2 這些類可以派上用場的地方。通過它們就可以針對每張圖片分別設(shè)置樣式了。在 _page-content.less 文件添加如下代碼：

#impact {  .review-item-4 .caption { top: 0; left: 62%; right: 10px; bottom: auto; .reviewer {  margin-top: 6px;  text-align: left; } } .review-item-5 .caption { top: 0; left: 17%; right: 10px; bottom: auto; }}

上面的規(guī)則針對特定的評論調(diào)整了說明元素的位置，得到了如下結(jié)果：

其他的針對特定評論的代碼如下，你也可以自己調(diào)整：

.review-item-1 .caption { top: 0; left: 10px; right: 20%; bottom: auto; } .review-item-2 .caption { top: auto; left: 10px; right: 17%; bottom: 0; } .review-item-3 .caption { top: auto; left: 17%; right: 10px; bottom: 0; } .review-item-4 .caption { top: 0; left: 62%; right: 10px; bottom: auto; .reviewer {  margin-top: 6px;  text-align: left; } } .review-item-5 .caption { top: 0; left: 17%; right: 10px; bottom: auto; } .review-item-6 .caption { top: 0; left: 10px; right: 63%; bottom: auto; .reviewer {  margin-top: 6px;  text-align: left; } } .review-item-7 .caption { top: 0; left: 62%; right: 10px; bottom: auto; .reviewer {  margin-top: 6px;  text-align: left; } }

8.3 添加 Bootstrap 的網(wǎng)格類

利用 Bootstrap 的網(wǎng)格類，可以使用 col-sm-6 在小屏幕中實(shí)現(xiàn)兩欄布局，使用 col-md-4 在中大屏幕實(shí)現(xiàn)三欄布局。

每個(gè) hreview 元素的類結(jié)構(gòu)都將如下面這行標(biāo)記所示：

<div class="hreview review-item-1 thumbnail col-sm-6 col-md-4">

給每個(gè)評論都添加這兩個(gè)類。

保存文件，編譯并刷新瀏覽器。拉伸、收縮瀏覽器窗口，在小視口和中大視口中布局的顯示情況如下：

在前面討論功能列表的時(shí)候，我們說過，如果網(wǎng)格項(xiàng)高度不一，它們就會穿插，不會形成整潔的網(wǎng)格。為此我們給每個(gè)元素設(shè)定了固定的高度。但在這里，我們希望每個(gè)評論的高度不同。既然還需要創(chuàng)建圖片墻，那就得借助一點(diǎn) JavaScript。

8.4 下載并鏈接 JavaScript 插件

要實(shí)現(xiàn)圖片墻效果，就得利用 JavaScript 計(jì)算可用空間，然后用最合適的圖片去填充相應(yīng)空間，最終讓高度不同的塊形成整齊的拼貼效果。

為了實(shí)現(xiàn)我們想要的效果，可以利用一個(gè)叫 Masonry 的 JavaScript 插件，它是由 David DeSandro 開發(fā)并維護(hù)的。

(1) 在瀏覽器打開http://masonry.desandro.com/

(2) 下載masonry.pkgd.min.js ，并把代碼復(fù)制到對應(yīng)的js/plugins.js 里。（雖然這樣增大了腳本文件，但卻沒有增加 HTTP 請求）

8.5 初始化 Masonry 插件

可參考其官方文檔地址：http://masonry.desandro.com/#getting-started

我們打開現(xiàn)在的 html 文檔，進(jìn)行如下修改：

(1) 給 div 添加 js-masonry 類，這是所有評論的父元素。這樣插件就會知道要在哪里起作用。

(2) 然后，在同一元素上，添加一個(gè)數(shù)據(jù)屬性，指定要拼貼的項(xiàng)。結(jié)果標(biāo)記如下：

<div class="reviews js-masonry" data-masonry-options='{"itemSelector":".hreview"}'>

這樣就可以告訴插件哪些元素參與拼貼了。這里指定的是 hreview 類。

(3) 查看最新的顯示效果，你會發(fā)現(xiàn)原來存在與圖片間的空白一下子就消失了。

小視口和中大視口的顯示效果如下：

8.6 切齊圖片

現(xiàn)在離客戶要求的結(jié)果已經(jīng)非常接近了。可是，我們?nèi)匀挥幸粋€(gè)問題沒有解決，就是可能沒有準(zhǔn)確的檢測到圖片的大小，導(dǎo)致部分圖片伸出較長，如下所示：

我們需要做一些剪裁。換句話說，實(shí)在不行，可以不上其他用戶的照片。這樣我們就可以做點(diǎn)什么了，先從修復(fù)三欄布局開始：

(1) 打開 _page-content.less，添加一行注釋：

// Cutting and trimming for masonry layout

(2) 接著，我們針對中大屏幕，隱藏 Smiling Customer4 這張圖片：

#impact { @media (min-width:@screen-md-min){ .review-item-4 {  display: none; } }}

此時(shí)的三欄布局就完美對齊了：

(3) 接著調(diào)整兩欄布局。針對伸出不多的這種情況，我們只需要在小視口中切掉一點(diǎn)圖片就行了，不包括超小視口，也不包括中大視口。為此，需要在媒體查詢中同時(shí)列出最小和最大寬度。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .review-item-5 {  height: 474px;  overflow: hidden;  img {  width: 100%;  } } }

這幾行代碼完成了以下幾件事：

□ 將 review-item-5 的高度精度設(shè)置為 474px，以便它與相鄰圖片底端對齊。

□ 隱藏超高溢出的部分。

□ 強(qiáng)制圖片寬度填滿可用空間。

現(xiàn)在，在平板大小的視口中顯示效果如下：

8.7 適應(yīng)小微屏幕

因?yàn)?Masonry 插件的影響，評論區(qū)的圖片在小微屏幕不受控制，會有圖片的覆蓋的情況。

此時(shí)，我們有兩個(gè)選擇：

□ 給每個(gè)評論添加 col-12 約束；

□ 寫一點(diǎn) LESS 添加約束。

第一種方法很簡單，對每個(gè)評論新增類 col-xs-12就可以了。

<div class="hreview review-item-1 thumbnail col-sm-6 col-md-4 col-xs-12">

第二種方法只要在 _page-content.less 中再添加一個(gè)媒體查詢就可以了，在這個(gè)媒體查詢中，我們限制 div的最大寬度為 400px。這個(gè)值既保證圖片足夠大，也不會讓它們太大。我們再使用 .center-block() 混入為評論加入自動的左右外邊距，從而實(shí)現(xiàn)居中。代碼如下：

@media (max-width: @screen-xs-max) { .reviews {  max-width: 400px;  .center-block(); } }

9.吸引人的價(jià)目表

我們再來看一眼客戶提供的設(shè)計(jì)圖，客戶期望的效果如下：

我們得考慮一下要完成這個(gè)結(jié)果需要做什么，在不同的視口中又需要如何調(diào)整它們的布局。

9.1 準(zhǔn)備變量、文件和標(biāo)記

如前面的設(shè)計(jì)圖所示，這個(gè)設(shè)計(jì)方案設(shè)計(jì)三個(gè)表格。我們先簡單實(shí)現(xiàn)這個(gè)部分的代碼：

<section id="signup">  <div class="container">   <h1>Sign up now!</h1>   <div class="package package-basic col-md-4">    <table class="table table-striped">     <thead>     <tr><th colspan="2"><h2>Basic Plan</h2><div class="price">$19</div></th></tr>     </thead>     <tfoot>     <tr><td colspan="2"><a href="#" class="btn">Sign up now!</a></td> </tr>     </tfoot>     <tbody>     <tr><td>Feature</td><td>Name</td></tr>     <tr><td>Feature</td><td>Name</td></tr>     <tr><td>Feature</td><td>Name</td></tr>     <tr><td>Feature</td><td>Name</td></tr>     <tr><td>Feature</td><td>Name</td></tr>     </tbody>    </table>   </div><!-- /.package .package-basic -->   <div class="package package-premium col-md-4"> ...   </div><!-- /.package .package-premium -->   <div class="package package-pro col-md-4"> ...   </div><!-- /.package .package-pro -->  </div><!-- /.container --> </section><!-- /#signup -->

顯示效果如下：

我們?yōu)閮r(jià)目表創(chuàng)建一個(gè)LESS文件 _pricing-tables.less ，并在 __main.less 中導(dǎo)入。

@import "_pricing-tables.less";

在寫新樣式之前，我們先來看看表格的標(biāo)記。

在每個(gè)表格標(biāo)記的父元素中，我們已經(jīng)應(yīng)用了下面的類;

□package package-basiccol-md-4

□package package-premiumcol-md-4

□package package-procol-md-4

這些父容器通過col-md-4 提供了基本的布局樣式，即在中型視口中會排成三欄。

下面我們分析看一看每個(gè)表格的標(biāo)記。第一個(gè)基本配置中，已經(jīng)應(yīng)用了 table-striped 類：

 <table class="table table-striped">

這個(gè)表格使用 <thead>元素作為最頂層的包含塊。在這個(gè)元素內(nèi)容，是一個(gè)跨兩列的<th>，其中包含<h2>標(biāo)題，是配置名稱，還有一個(gè) <div>，里面是價(jià)格：

<thead> <tr> <th colspan="2"> <h2>Basic Plan</h2> <div class="price">$19</div> </th> </tr> </thead>

再后面是包含Sign up Now! 按鈕的 tfoot 標(biāo)簽：

<tfoot> <tr> <td colspan="2"><a href="#" class="btn">Sign up now!</a>  </td>  </tr></tfoot>

然后是 tbody 標(biāo)簽，包含一組功能列表，很直觀，每行兩列：

<tbody><tr><td>Feature</td><td>Name</td></tr><tr><td>Feature</td><td>Name</td></tr><tr><td>Feature</td><td>Name</td></tr><tr><td>Feature</td><td>Name</td></tr><tr><td>Feature</td><td>Name</td></tr></tbody>

最后，當(dāng)然是兩個(gè)關(guān)閉標(biāo)簽：

</table></div><!-- /.package .package-basic -->

其他兩個(gè)表格的結(jié)構(gòu)也都一樣。

9.2 表格頭

要美化所有表格的表格頭元素，需要做以下幾件事：

□ 居中文本；

□ 添加與最終版本接近的中性灰作為背景顏色；

□ 把字體顏色改為白色；

□ 把 h2 轉(zhuǎn)換為大寫；

□ 增大價(jià)目表的尺寸；

□ 給表格添加必要的內(nèi)邊距。

完成以上美化工作，只要下面幾行代碼即可。這里我們把所有針對表格的樣式都放到 #signup 選擇符中：

#signup { table { border: 1px solid @table-border-color; float: none; thead th {  text-align: center;  background-color: @gray-light;  color: #fff;  padding-top: 12px;  padding-bottom: 32px;  h2 {  text-transform: uppercase;  } } }}

簡單來說，這些樣式完成了除增大價(jià)目表尺寸之外的所有工作。我們可以在這個(gè)基礎(chǔ)上，開始添加樣式，仍然在 #signup 選擇符內(nèi)：

.price { font-size: 7em; line-height: 1; }

這樣就得到了下面的結(jié)果：

這就跟我們預(yù)期的結(jié)果接近了，但我們想減少美元符號的大小。為了能控制到它，必須在標(biāo)記中給它加個(gè) span 標(biāo)簽：

<div class="price"><span>$</span>19</div>

添加新標(biāo)簽后，可以把相應(yīng)規(guī)則嵌套在 .price 中：

.price { ... span {  font-size: .5em;  vertical-align: super; } }

以上規(guī)則就縮小了美元符號為原來的一半，并且頂部對齊。

接下來居中結(jié)果，需要給父 .price 選擇符添加一點(diǎn)負(fù)外邊距：

 .price { margin-left: -0.25em; ...

下面的屏幕截圖就是現(xiàn)在的結(jié)果：

9.3 表體和表腳

同樣以三個(gè)價(jià)目表為目標(biāo)，統(tǒng)一做出如下調(diào)整：

□ 給功能列表添加左、右內(nèi)邊距；

□ 把按鈕拉伸至全寬；

□ 增大按鈕尺寸。

規(guī)則代碼如下：

#signup { table {  ... tbody {  td {  padding-left: 16px;  padding-right: 16px;  } } a.btn {  .btn-lg;  display: block;  width: 100%;  background-color: @gray-light;  color: #fff; }

現(xiàn)在的效果如下:

現(xiàn)在公共樣式完成了，接下來就可以考慮差異化了。

9.4 為不同的價(jià)目表添加不同的樣式

我們先來給不同的價(jià)目表的表頭和 Sign up Now! 按鈕添加預(yù)期的顏色。在客戶給我們的設(shè)計(jì)圖中，Basic 是藍(lán)色，Premium 是綠色，Pro 是紅色。下面我們將選擇好的顏色值指定給三級品牌色：

@brand-primary:  #428bca;@brand-secondary:  #5cb85c;@brand-tertiary:  #d9534f;

設(shè)置完顏色變量，就可以將它們應(yīng)用給適當(dāng)?shù)谋眍^和按鈕：

(1) 在這里我們先給 .package-basic 表應(yīng)用主品牌色 @brand-primary：

#signup .package-basic table{ thead th {  background-color: @brand-primary; } } ...

(2) 然后再把主品牌色應(yīng)用給表格里的按鈕。這里，我們使用 bootstrap/mixins.less 中定義的 .button-variant() 混入給 :hover 和 .active 狀態(tài)應(yīng)用樣式。這個(gè)混入函數(shù)接受三個(gè)參數(shù)：顏色、背景顏色和邊框顏色。代碼如下：

#signup .package-basic table{ ...  .btn {   .button-variant(#fff; @brand-primary; darken(@brand-primary, 5%));  } }

編譯后，這個(gè)簡潔的混入函數(shù)就會給按鈕及其懸停、活動狀態(tài)生成對應(yīng)的樣式了。

(3) 接著，我們對其它兩個(gè)表格重復(fù)上述過程：

#signup .package-premium table { thead th {  background-color: @brand-secondary; } .btn {  .button-variant(#fff; @brand-secondary; darken(@brand-secondary, 5%)); }}#signup .package-pro table { thead th {  background-color: @brand-tertiary; } .btn {  .button-variant(#fff; @brand-tertiary; darken(@brand-tertiary, 5%)); }}

現(xiàn)在表格的效果如下：

9.5 適配小視口

由于 Bootstrap 3 對響應(yīng)式設(shè)計(jì)的重視，我們的表格在視口斷點(diǎn)時(shí)都表現(xiàn)得很好。前面已經(jīng)看到在中級寬度視口中表格的表現(xiàn)了，下面在看看各種視口的顯示效果，發(fā)現(xiàn)顯示很好，但是在大約 480~992px 之間的時(shí)候，表格會擴(kuò)展到與屏幕一樣寬。很明顯，這個(gè)時(shí)候就太寬了，如下圖所示：

因?yàn)橹挥腥齻€(gè)表格，所以不可能考慮兩欄布局的方案。只能限制表格寬度，并使用自動的左、右外邊距使它們居中。我們使用 max-width 為 @screen-sm-max 的媒體查詢，把表格的最大寬度設(shè)置為400px，再使用 .center-block() 讓表格居中：

@media (max-width: @screen-sm-max) { #signup .package {  max-width: 400px;  .center-block(); }}

這樣就可以寬度受限的表格在窗口居中了，如下：

此時(shí)，三個(gè)表格有了差異，而且具備了響應(yīng)性。可是，我們希望在中、大視口，我們希望 Premium 方案能夠突出。

9.6 突出重要的表格

我們要在針對中大視口的媒體查詢中添加樣式：

// Visually enhance the premium plan@media(min-width: @screen-md-min){ }

在這個(gè)媒體查詢中，我們首先減少 Basic 和 Pro 表的寬度，再給它們添加一些上外邊距，將它們向下推一下：

//Size down the basic and pro #signup .package-basic table, #signup .package-pro table {  width: 90%;  margin-top: 36px; }

接下來增大 Premium表的字號，并為其按鈕添加內(nèi)邊距：

//Size up the premium #signup .package-premium table {  thead th {   font-size: 1.5em;   h2 {    font-size: 1.5em;   }  }  a.btn {   font-size: 2em;   padding-top: 24px;   padding-bottom: 24px;  } }

這樣得到的結(jié)果跟預(yù)期目標(biāo)已經(jīng)接近了，如下圖所示：

下一個(gè)目標(biāo)就是讓三個(gè)表格靠近一些。為此，就要對外邊距進(jìn)行一些調(diào)整，在用一用 z-index 屬性：

//Squeeze tables together #signup .package-basic {  margin-top: -58px;  margin-left: 58px;  z-index: 1; } #signup .package-premium {  z-index: 1000; } #signup .package-pro {  margin-right: -30px;  z-index: 1; }

解釋下上面的規(guī)則：

□ 使用負(fù)的右外邊距把（左側(cè)的）BASIC PLAN 表向右推，同時(shí)用等量的左外邊距抵消它，以保持三個(gè)表格的相對位置不變；

□ 使用負(fù)的左外邊距把（右側(cè)的）PRO PLAN 表向左推。

□ 調(diào)整所有表格的 z-index 值，讓左、右兩個(gè)表位于中間的表地下。

PS:關(guān)于 z-index，可以參考這篇文章：https://css-tricks.com/almanac/properties/z/z-index/

下面的屏幕截圖顯示了在中等寬度視口中的效果：

接下來只需要再對 Basic 表在下一個(gè)更大的斷點(diǎn)作一調(diào)整。在上一個(gè)媒體查詢后面寫一個(gè)新的媒體查詢：

@media (min-width: @screen-lg-min) { #signup .package-basic {  margin-right: -65px;  margin-left: 65px; }}

我們可以看到在1200px 及更大的視口中的效果如下：

現(xiàn)在，我們需要從整體上做一些修飾和調(diào)整的工作。

10.最后的調(diào)整

本節(jié)，我們將從增強(qiáng)頁面整體性的角度出發(fā)，再做一些細(xì)節(jié)的調(diào)整。首先，給頁面中的每個(gè)部分的 h1 標(biāo)題增加上必要的上、下內(nèi)邊距，并增大字號。然后，再增強(qiáng)一下導(dǎo)航的體驗(yàn)，即給導(dǎo)航條添加 ScrollSpy 并使用 jQuery 將點(diǎn)擊導(dǎo)航后的滾動過程變成動畫。

10.1 調(diào)整標(biāo)題

先來增強(qiáng)各部分的主標(biāo)題。現(xiàn)在看一下這些標(biāo)題，你會發(fā)現(xiàn)它們很不起眼。比如，就以 Features 部分為例吧：

我們的增強(qiáng)方案是降低其對比度，增大其內(nèi)邊距。我們只想把規(guī)則應(yīng)用給 FEATURE、IMPACT 和 SIGN UP，因此可以通過 ID 選擇它們。

(1) 在編輯器打開 _page-content.less 。

(2) 在文件頂部，在給頁面主體應(yīng)用上內(nèi)邊距的規(guī)則之后，添加以下代碼：

#features, #impact, #signup { padding-top: 36px; padding-bottom: 48px; h1 {  font-size: 5em;  color: @gray;  line-height: 1.3;  padding-bottom: 24px; }}

(3) 以上規(guī)則做的事情如下：

□ 給這些部分添上上、下內(nèi)邊距；

□ 顯著增大 h1 標(biāo)題的字號；

□ 減少標(biāo)題的對比度；

□ 通過設(shè)置行高和下內(nèi)邊距，保證標(biāo)題周圍的空間合適。

現(xiàn)在的效果如下，看看有什么不一樣：

這些變化會體現(xiàn)在所有視口大小的頁面中。對于小視口，目前的 h1 太大了。另外，我們還需要添加一些左、右外邊距。因此還要繼續(xù)調(diào)整一下。我們不想讓后面的樣式影響大視口的布局，所以得把它們封裝到一個(gè)媒體查詢中：

// Adjust section headings for extra-small viewports only@media (max-width: @screen-xs-max) {  #features, #impact, #signup {    margin-left: 30px;    margin-right: 30px;    h1 {      font-size: 3em;    }  }}

下面的屏幕截圖展示了調(diào)整后的效果：

接下來我們改進(jìn)導(dǎo)航的體驗(yàn)。

10.2.為導(dǎo)航條添加 ScrollSpy

我們要配置頂部的導(dǎo)航條，令其對應(yīng)頁面中的位置。下面給導(dǎo)航條添加 Bootstrap 的 ScrollSpy：

(1) 打開 html 文檔，給 body 標(biāo)簽添加下面的 ScrollSpy 屬性：

<body data-spy="scroll" data-target=".navbar">

PS:假如頁面中包含多個(gè)導(dǎo)航條，需要在 data-target 屬性中具體指出。或許得為 ScrollSpy 導(dǎo)航條添加一個(gè)ID，比如，然后將這個(gè)ID作為 data-target屬性的值。

(2) 設(shè)置了這些屬性，保存文件，刷新瀏覽器，點(diǎn)擊導(dǎo)航，會發(fā)現(xiàn)導(dǎo)航能夠定位到頁面對應(yīng)的位置，如下圖所示：

添加動畫

打開 js/main.js 文件，在$( document ).ready(function() { 中添加以下代碼：

$('.navbar [href^=#]').click(function(e){    e.preventDefault();    var div = $(this).attr('href');    $("html, body").animate({      scrollTop: $(div).position().top    }, "slow");  });

這里我們使用 jQuery 做了以下幾件事：

□ 選擇了 .navbar 元素中以頁面位置中的錨為目標(biāo)的鏈接；

□ 阻止了默認(rèn)的單擊行為；

□ 將滾動過程變?yōu)閯赢嫞O(shè)置了動畫速度為 slow。

單擊某個(gè)導(dǎo)航項(xiàng)，就可以看到滾動動畫了。

11.小結(jié)

花點(diǎn)時(shí)間前后翻閱一下頁面，欣賞一下各部分的細(xì)節(jié)，調(diào)整一下窗口，看看布局的響應(yīng)性如何。

下面簡單回顧下，我們的客戶向我們提出了設(shè)計(jì)一個(gè)單頁營銷站點(diǎn)的要求：

□ 使用 Bootstrap 高清圖樣式的大字歡迎語，背景圖十分搶眼，而且具有響應(yīng)能力；

□ 使用 Font Awesome 圖標(biāo)的功能列表；

□圖片墻網(wǎng)格的用戶贊譽(yù)，同樣完美適配各種視口；

□ 注冊區(qū)使用 Bootstrap 的表格樣式，并自定義了中檔價(jià)目表，在其中、大視口更加突出；