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

主要任務(wù)如下：

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

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

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

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

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

1.概況

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

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

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

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

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

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

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

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

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

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

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

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

第四部分也是最后一部分，提供了三個(gè)可以選的方案，每個(gè)方案對(duì)應(yīng)相對(duì)的報(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)目保持一致。下面我們簡(jiǎn)單回顧下 LESS 文件。

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

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

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

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

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

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

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

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

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

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

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

□ 帶一句大號(hào)歡迎語(yǔ)的高清圖；

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

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

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

□ 頁(yè)腳的 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ù)之前的可以簡(jiǎn)單實(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)整針對(duì)導(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.頁(yè)腳

代碼很簡(jiǎn)單，和之前一樣：

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

我們需要簡(jiǎn)單的修改下樣式，打開 _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)容部分了。我們先自定義高清圖，顯示客戶的大號(hào)歡迎語(yǔ)，同時(shí)要對(duì)標(biāo)記進(jìn)行一番調(diào)整。包括添加大背景圖，放大歡迎語(yǔ)，然后調(diào)整其在多視口中的外觀。

我們簡(jiǎn)單實(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;
 }
}

接下來(lái)，我們使用媒體查詢?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)在可以顯示背景圖了，但是只會(huì)在非大視口（默認(rèn)值屏幕寬度為911px 或更?。┎艜?huì)顯示：

(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) 接下來(lái)考慮大視口，此時(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í)，就會(huì)顯示1600px 寬的背景圖片了。

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

調(diào)整歡迎語(yǔ)

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

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

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

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

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

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

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

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

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

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

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

#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)寫過(guò)媒體查詢，我們?cè)谄浠A(chǔ)上添加一些規(guī)則，完成以下任務(wù)：

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

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

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

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

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

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

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

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

顯示效果如下：

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

7.功能列表

功能列表部分，就是6個(gè)包含圖標(biāo)、標(biāo)題和簡(jiǎn)短文字描述的功能列表，加上一個(gè)大的標(biāo)題組成，我們可以先通過(guò)柵格系統(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)，居中對(duì)齊文本，然后平整網(wǎng)格。

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

// Features Section
#features {
}

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

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

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

(3) 下面針對(duì)平板等小視口調(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)會(huì)自己變成一欄。

(5) 但是，在超小屏幕范圍之上，即500 ~ 767px 的時(shí)候，一欄的布局會(huì)導(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 元素在任何視口中都會(huì)保存理想的寬度了！

8.用戶評(píng)論區(qū)

接下的部分就是用戶評(píng)論區(qū)了，用來(lái)展示成功用戶的評(píng)論。在這一部分，我們看到的是成功用戶的笑臉，還有他們對(duì)我們客戶商品的贊美之詞?？梢詮那懊娴男Ч麍D看到是由若干條評(píng)論組成。每條評(píng)論都包含了用戶的圖片、評(píng)論以及用戶名稱。

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

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

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

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

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

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

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

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

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

8.1 定位及美化說(shuō)明

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

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

// Impact Section
#impact { 
}

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

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

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

#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) 下面就是評(píng)論文字了，我們要指定外邊距、邊框、字體、字號(hào)和顏色：

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

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

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

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

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

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

這就是 review-item-1、review-item-2 這些類可以派上用場(chǎng)的地方。通過(guò)它們就可以針對(duì)每張圖片分別設(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ī)則針對(duì)特定的評(píng)論調(diào)整了說(shuō)明元素的位置，得到了如下結(jié)果：

其他的針對(duì)特定評(píng)論的代碼如下，你也可以自己調(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è)評(píng)論都添加這兩個(gè)類。

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

在前面討論功能列表的時(shí)候，我們說(shuō)過(guò)，如果網(wǎng)格項(xiàng)高度不一，它們就會(huì)穿插，不會(huì)形成整潔的網(wǎng)格。為此我們給每個(gè)元素設(shè)定了固定的高度。但在這里，我們希望每個(gè)評(píng)論的高度不同。既然還需要?jiǎng)?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ù)制到對(duì)應(yīng)的js/plugins.js 里。（雖然這樣增大了腳本文件，但卻沒有增加 HTTP 請(qǐng)求）

8.5 初始化 Masonry 插件

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

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

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

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

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

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

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

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

8.6 切齊圖片

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

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

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

// Cutting and trimming for masonry layout

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

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

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

(3) 接著調(diào)整兩欄布局。針對(duì)伸出不多的這種情況，我們只需要在小視口中切掉一點(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，以便它與相鄰圖片底端對(duì)齊。

□ 隱藏超高溢出的部分。

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

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

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

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

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

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

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

第一種方法很簡(jiǎn)單，對(duì)每個(gè)評(píng)論新增類 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è)值既保證圖片足夠大，也不會(huì)讓它們太大。我們?cè)偈褂?.center-block() 混入為評(píng)論加入自動(dòng)的左右外邊距，從而實(shí)現(xiàn)居中。代碼如下：

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

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

我們?cè)賮?lái)看一眼客戶提供的設(shè)計(jì)圖，客戶期望的效果如下：

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

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

如前面的設(shè)計(jì)圖所示，這個(gè)設(shè)計(jì)方案設(shè)計(jì)三個(gè)表格。我們先簡(jiǎn)單實(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";

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

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

□package package-basiccol-md-4

□package package-premiumcol-md-4

□package package-procol-md-4

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

下面我們分析看一看每個(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)邊距。

完成以上美化工作，只要下面幾行代碼即可。這里我們把所有針對(duì)表格的樣式都放到 #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ǎn)單來(lái)說(shuō)，這些樣式完成了除增大價(jià)目表尺寸之外的所有工作。我們可以在這個(gè)基礎(chǔ)上，開始添加樣式，仍然在 #signup 選擇符內(nèi)：

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

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

這就跟我們預(yù)期的結(jié)果接近了，但我們想減少美元符號(hào)的大小。為了能控制到它，必須在標(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ī)則就縮小了美元符號(hào)為原來(lái)的一半，并且頂部對(duì)齊。

接下來(lái)居中結(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)在公共樣式完成了，接下來(lái)就可以考慮差異化了。

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

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

@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è)簡(jiǎn)潔的混入函數(shù)就會(huì)給按鈕及其懸停、活動(dòng)狀態(tài)生成對(duì)應(yīng)的樣式了。

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

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

因?yàn)橹挥腥齻€(gè)表格，所以不可能考慮兩欄布局的方案。只能限制表格寬度，并使用自動(dòng)的左、右外邊距使它們居中。我們使用 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 突出重要的表格

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

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

接下來(lái)增大 Premium表的字號(hào)，并為其按鈕添加內(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è)表格靠近一些。為此，就要對(duì)外邊距進(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è)表格的相對(duì)位置不變；

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

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

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

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

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

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

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

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

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

(2) 在文件頂部，在給頁(yè)面主體應(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)題的字號(hào)；

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

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

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

這些變化會(huì)體現(xiàn)在所有視口大小的頁(yè)面中。對(duì)于小視口，目前的 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)整后的效果：

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

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

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

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

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

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

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

添加動(dò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 元素中以頁(yè)面位置中的錨為目標(biāo)的鏈接；

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

□ 將滾動(dòng)過(guò)程變?yōu)閯?dòng)畫，設(shè)置了動(dòng)畫速度為 slow。

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

11.小結(jié)

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

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

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

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

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

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

□ 使用 ScrollSpy 和 jQuery 增強(qiáng)了導(dǎo)航條，并添加了動(dòng)畫滾動(dòng)效果。

這樣，本書就結(jié)束了。做完本章和前面幾章的項(xiàng)目，相信你一定有了比較大的收獲?？偨Y(jié)一下吧：

□ 掌握了 Bootstrap 的所有細(xì)節(jié)；

□ 把 Bootstrap LESS 和 JavaScript 整合進(jìn)我們的項(xiàng)目文件；

□ 把 Bootstrap 的 glyphicons 替換成了更豐富的 Font Awesome 圖標(biāo)字體；

□ 對(duì) Bootstrap 的樣式進(jìn)行自定義和調(diào)整，從而達(dá)到對(duì)設(shè)計(jì)結(jié)果的精準(zhǔn)控制。

此例顯示效果地址：http://ycdoit.com/show/bootstrap-code-06.html

以上所述是小編給大家介紹的Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷網(wǎng)站，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！