Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目4

更新時間：2016年10月14日 08:55:28 作者：葉超Luka

這篇文章主要為大家分享了Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下

上一章有對個人作品站點進行一些優(yōu)化。本章，輪到我們充實這個作品站點了，補充一些項目，從而展示我們的能力。換句話說，我們要構(gòu)建一個相對復(fù)雜的企業(yè)網(wǎng)站主頁。

下面有幾個成功企業(yè)的網(wǎng)站：

□ Zappos (http://www.zappos.com/)

□ Amazon (https://www.amazon.com/)

盡管這些網(wǎng)站網(wǎng)站各有特色，但共同的一點就是它們都很復(fù)雜。

如果按照區(qū)域劃分，可以將這些網(wǎng)站的主頁分成三部分。

□ 頁頭區(qū)：這一部分包含Logo、帶下拉菜單的主導(dǎo)航、二級和實用鏈接導(dǎo)航，以及登錄和注冊選項。

□ 主內(nèi)容區(qū)：這一部分布局復(fù)雜，至少三欄。

□ 頁腳區(qū)：包含多欄鏈接和信息。

我們必須能夠掌控這些復(fù)雜性。為此，需要充分利用 Bootstrap 的12欄響應(yīng)式系統(tǒng)。

以下是我們打算要構(gòu)造的設(shè)計在中、寬視口中的效果：

在窄視口中，頁面會相應(yīng)變化，如下圖所示：

這樣，我們需要做以下這些事。

(1) 以【Bootstrap】2.作品展示站點的個人站點作為起點。

(2) 完成復(fù)雜的頁頭區(qū)，包括 Logo、導(dǎo)航以及右上角的實用導(dǎo)航（桌面視口）。

(3) 在較窄的視口中，實用導(dǎo)航只顯示為圖標(biāo)，與折疊后的響應(yīng)式導(dǎo)航條并列。

(4) 要實現(xiàn)企業(yè)風(fēng)格的配色方案。

(5) 調(diào)整桌面版和響應(yīng)式導(dǎo)航條。

(6) 為主內(nèi)容區(qū)和頁腳區(qū)設(shè)置復(fù)雜的多欄布局。

先做最核心的工作 —— 準(zhǔn)備項目的啟動文件。

1. 準(zhǔn)備啟動文件

我們直接把前面的例子作為啟動文件，然后在其之上進行修改就行了。（當(dāng)然也可以直接提供的本書源碼,然后解壓縮找到文件夾04_Code_BEGIN ）

2.頁頭區(qū)

下面我們就從上到下，先來實現(xiàn)復(fù)雜的頁頭區(qū)，在前一個項目的基礎(chǔ)上包括以下特性：

□在桌面瀏覽器及較大視口中，讓站點 Logo 顯示在導(dǎo)航條之上。

□ 包含菜單項的導(dǎo)航條，每個菜單項又都包含下拉菜單。

□ 使用導(dǎo)航區(qū)。

□ 帶用戶名和密碼字段的登錄表單。

□ 注冊選項。一下是桌面瀏覽器中的目標(biāo)結(jié)果：

窄視口中的目標(biāo)結(jié)果如下：

讓我們開始吧。

2.1 包含下拉菜單的導(dǎo)航項

可以看到導(dǎo)航條是由下拉菜單的，所以我們先修改下對應(yīng)的導(dǎo)航條。很明顯，導(dǎo)航項采用了下拉菜單。我們可以參考下官方文檔，先實現(xiàn)下拉菜單。

官方文檔：http://getbootstrap.com/components/

中文版文檔：http://v3.bootcss.com/components/

(1) 根據(jù)文檔，我們實現(xiàn)第一個下拉菜單的代碼如下：

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 <li class="divider"></li>
 <li><a href="#">One more separated link</a></li>
</ul>
</li>

可以看到效果如下：

(2) 補全其他下拉菜單代碼。

(3) 我們修改導(dǎo)航項。把bootstrap/navbar.less 的內(nèi)容復(fù)制到_navbar.less 中，覆蓋原內(nèi)容。然后找到注釋// Brand/project name，修改.navbar-brand的內(nèi)邊距如下：

// Brand/project name
.navbar-brand { ...
 padding: 10px 30px 0 15px;
 ...

(4) 打開 less/_variables.less 文件，修改變量如下：

復(fù)制代碼代碼如下:

@navbar-height: 50px;

(5) 保存，編譯。這樣我們的下拉菜單初步完成。顯示效果如下：

2.2 把 Logo 放到導(dǎo)航條上方

在這個設(shè)計方案里，Logo 可能出現(xiàn)在兩個地方，視情況而定：

□ 在桌面和寬屏幕中，顯示在導(dǎo)航條上方;

□ 在平板和手機屏幕中，顯示在響應(yīng)式導(dǎo)航條內(nèi)部。

利用 Bootstrap 的響應(yīng)式使用類，這兩點我們都可以做到。方法如下;

(1) 打開html文檔，找到導(dǎo)航條，復(fù)制 navbar-brand 的鏈接和圖片：

<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>

(2) 然后粘貼到導(dǎo)航條上方，在<header role="banner">標(biāo)簽和<nav role="navigation">標(biāo)簽之間。

(3) 把這個 Logo 用<div>...</div> 包裝起來，使其被限制在 Bootstrap 居中的網(wǎng)格內(nèi)部。

(4) 編輯 Logo 鏈接，將其類名由 navbar-brand 改為 banner-brand 。然后把圖片寬度改為180

<div class="container">
 <a class="banner-brand" href="index.html">
 <img src="img/logo.png" alt="Bootstrap'" width="180" />
 </a>
</div>

(5) 保存修改，刷新顯示，就可以在導(dǎo)航條上面看到新的Logo了：

下面我們需要調(diào)整 Logo，讓它只在必要時顯示。

在 _variables.less 中，找到變量 @grid-float-breakpoint ，并修改為：

復(fù)制代碼代碼如下:

@grid-float-breakpoint: @screen-md-min;

這個變量決定了導(dǎo)航條在窄視口中折疊，在寬視口中展開。在我們的實際中，考慮到導(dǎo)航的復(fù)雜性，需要在接近的下一個較寬的斷點折疊導(dǎo)航條。因此，需要把變量的值設(shè)置為@screen-md-min。

設(shè)置完這個變量后，我們要考慮讓 banner-brand 只在中、大型視口中顯示，而讓 navbar-brand 只在小和超小型視口中顯示。Bootstrap 為此提供了一組響應(yīng)式實用類，具體可以參考在線文檔：http://getbootstrap.com/css/（中文文檔：http://v3.bootcss.com/css/）

下面我們就按照需求來應(yīng)用這些類。

(1) 把 visible-md visible-lg 添加到 banner-brand 類后面：

<a class="banner-brand visible-md visible-lg" href="#">
 <img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>

(2) 把 visible-xs visible-sm 添加到 navbar-brand 類后面：

<a class="navbar-brand visible-xs visible-sm" href="#">
 <img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>

(3) 保存修改，刷新網(wǎng)頁?？梢钥吹?，在中、大型視口中，只會顯示 banner-brand 中的 Logo：

在小型和超小型視口中，只會顯示 navbar-brand 中的 Logo：

2.3 調(diào)整導(dǎo)航條

現(xiàn)在導(dǎo)航條包含7項，每項又各有子菜單，體現(xiàn)了一個大型復(fù)雜網(wǎng)站的需求。

接下來，我們要把 All Departments 菜單挪到導(dǎo)航條的最右端，讓它與其他菜單保持最大距離。

操作步驟是：我們先把 All Departments 菜單移除父元素 ul，并列排在原父元素 ul 后；然后使其包含在新的 ul 標(biāo)簽內(nèi)，新標(biāo)簽的類名為 "nav navbar-nav pull-right"。

</ul>
<ul class="nav navbar-nav pull-right">
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">All Departments <b class="caret"></b></a>

保持修改并刷新頁面，就可以看到效果了：

2.4 添加使用導(dǎo)航

我們的設(shè)計需要提供幾個實用的導(dǎo)航鏈接，讓用戶可以登錄、注冊和查看購物車。

在中大型的視口中，我們把它們放到頁頭區(qū)的右上角，如下圖所示：

在較小的屏幕中，則把對應(yīng)的鏈接圖標(biāo)顯示在折疊后的導(dǎo)航條的最右端，如下圖所示：

說做就做。打開 html 文檔，在頁頭區(qū)添加實用導(dǎo)航項的標(biāo)記，放在 banner-brand 元素后面。以下是完整的標(biāo)記，開頭是 header 標(biāo)簽：

<header role="banner">
 <div class="container">
 <a class="banner-brand visible-md visible-lg" href="#">
 <img src="img/logo.png" alt="Bootstrap'" width="180" />
 </a>
 <div class="utility-nav">
 <ul>
 <li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> Log In or Register</a></li>
 <li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> View Cart</a></li>
 </ul>
 </div>
 </div>

上面的 fa-user 和 fa-shopping-cart 類添加了 Font Awesome 的用戶和購物車的圖標(biāo)，并通過 fa-lg 類把它們的尺寸增大了33%。關(guān)于增大 Font Awesome 圖標(biāo)的詳細說明，可以參考它的文檔：http://fontawesome.io/examples/

保存修改并刷新頁面后，就可以看到新添加的 utility-nav 出現(xiàn)在 banner-brand Logo下方了：

接下來，我們需要對布局進行相對位置的調(diào)整。

(1) 新建文件 less/_banner.less ，并在 __main.less 導(dǎo)入該文件。

(2) 編輯 _banner.less 文件，先把 .utility-nav 設(shè)置為絕對定位到右上角，而且是在 header[role="banner"]的上下文中應(yīng)用樣式：

//// Banner Area Styles
//
header[role="banner"]{
 .utility-nav {
 position: absolute;
 top: 0;
 right: 0;
 }
}

(3) 然后再進行一些細節(jié)調(diào)整：

□ 為.banner-brand 類添加上內(nèi)邊距，以增加頁頭區(qū)的高度。

□ 將頁頭區(qū) container 的定位方式設(shè)置為 relative，以使它包含絕對定位的 utility-nav 元素。

□ 刪除無序列表的項目符號。

□ 向左浮動列表項

□ 將鏈接顯示為 inline-block 并添加內(nèi)邊距。

□ 刪除懸停時的下劃線。

完成上述調(diào)整的樣式規(guī)則如下：

//// Banner Area Styles
//
header[role="banner"]{
 .banner-brand {
 padding-top:40px;
 }
 > .container {
 position: relative;
 }
 .utility-nav {
 position: absolute;
 top: 0;
 right: 0;
 > ul {
 list-style:none;
 > li {
 float: left;
 > a {
 display: inline-block;
 padding: 8px 12px;
 &:hover {
 text-decoration: none;
 }
 }
 }
 }
 }
}

保存修改并編譯。把瀏覽器窗口調(diào)整到桌面創(chuàng)建大小，然后刷新。應(yīng)該能看到 utility-nav 元素出現(xiàn)在頁頭區(qū)的右上角位置。

這些調(diào)整適合中大型的視口。下面我們針對折疊后的響應(yīng)式導(dǎo)航條來添加樣式。

3.調(diào)整響應(yīng)式導(dǎo)航

在小屏幕中，導(dǎo)航條折疊后 utility-nav 會出現(xiàn)問題。最明顯的問題就是它會消失不見。

要讓 utilility-nav 顯示。必須給他設(shè)置一個比導(dǎo)航條更大的 z-index，前者在 _variables.less 中被設(shè)置為1000.我們可以在 _banner.less 中，把 .unlility-nav 的 z-index 設(shè)置為 1999.

復(fù)制代碼代碼如下:

.utility-nav { ... z-index: 1999;

于是，實用導(dǎo)航就會出現(xiàn)了：

接下來需要解決它會遮擋 navbar-toggle 按鈕的問題。把按鈕移到導(dǎo)航條左側(cè)就行了，修改 _navbar.less ，找到注釋// Navbar toggle，修改.navbar-toggle 選擇符的值：

.navbar-toggle {
 position: relative;
 float: left; //edited
 margin-left: @navbar-padding-horizontal; //edited

保存后編譯，就可以看到效果了：

很明顯，我們還需要解決過分擁擠的問題，也就是要對除屏幕閱讀器之外的設(shè)備隱藏鏈接文本。在折疊后的導(dǎo)航條中，圖標(biāo)本身就足以傳遞意圖了，何況還可以把圖標(biāo)弄得更大一些。

(1) 打開 html 文檔，用 span 元素包圍 utilility-nav 中每個鏈接的文本：

<li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> <span>Log In or Register</span></a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> <span>View Cart</span></a></li>

(2) 在 _banner.less 中添加針對這些 span 標(biāo)簽的媒體查詢。在使用LESS的情況下，可以精確的嵌套媒體查詢。在此要使用 @grid-float-breakpoint 變量，把 max-width 查詢設(shè)置為 @grid-float-breakpoint -1 ，因為這個變量的值意味著在它那么寬時，導(dǎo)航條就會從折疊變成擴展?fàn)顟B(tài)。在這個媒體查詢中，使用實用類 sr-only 作為混入，對除屏幕閱讀器之外的所有設(shè)備隱藏文本。（參考文檔：http://getbootstrap.com/css/）

.utility-nav { ...
 > a { ...
 @media (max-width:(@grid-float-breakpoint - 1)){
 span { .sr-only(); }
 }

這樣就隱藏了 span 標(biāo)簽中的文本，屏幕上將只剩圖標(biāo)。

(3) 再增大圖標(biāo)尺寸，并在垂直方向上增加一些行高。同樣還在這個媒體查詢中寫樣式：

@media (max-width:(@grid-float-breakpoint - 1)){
 span {
 .sr-only();
 }
 .icon {
 font-size: 2em;
 line-height: 1.2;
 }

保存編譯后，可以查看到顯示效果如下：

4.調(diào)整配色

我們希望網(wǎng)站的配色是標(biāo)準(zhǔn)的企業(yè)網(wǎng)站顏色：藍、紅、灰。下面我們把這些顏色放到變量里。

(1) 打開 _variables.less ，修改 @brand-primary，并新增紅色的 @brand-feature。

@brand-primary: #3e7dbd; //edited blue

@brand-feature: #c60004; //added new red

(2) 然后調(diào)整鏈接的懸停顏色，使其比 @brand-primary 稍淺：

復(fù)制代碼代碼如下:

@link-hover-color: lighten(@link-color, 15%); //edited

修改后效果如下：

5.調(diào)整折疊后的導(dǎo)航條配色

打開 _variables.less ，搜索// Navbar，在這里看到導(dǎo)航條用到的變量。這里指定的大多數(shù)標(biāo)準(zhǔn)值既對折疊后的響應(yīng)式導(dǎo)航條有效，也對寬屏幕下擴展的導(dǎo)航條有效。

我們希望折疊后響應(yīng)式導(dǎo)航條的背景、文本和鏈接顏色和默認值基本一致，但在中大型視口中變成藍色背景、淺色文本。

5.1 調(diào)整響應(yīng)式導(dǎo)航條

為此要調(diào)整一些變量的默認值，然后再創(chuàng)建一些新變量，只應(yīng)用給擴展后的導(dǎo)航條。

(1) 找到注釋// Basics of a navbar，修改代碼如下：

@navbar-height: 44px; 
...
@navbar-default-color: @text-color;
@navbar-default-bg: #fff;

(2) 向下找到導(dǎo)航條鏈接區(qū)，調(diào)整顏色讓鏈接顏色與導(dǎo)航條文本顏色一致，并給活動鏈接添加一點背景色：

// Navbar links
@navbar-default-link-color: @navbar-default-color;
@navbar-default-link-hover-color: @navbar-default-color;
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 5%);
@navbar-default-link-active-color: @navbar-default-color;
@navbar-default-link-active-bg: @navbar-default-link-hover-bg;

(3) 再調(diào)整 navbar-toggle 的樣式，刪除邊框和背景，調(diào)深導(dǎo)航條：

// Navbar toggle
@navbar-default-toggle-hover-bg: transparent;
@navbar-default-toggle-icon-bar-bg: @gray;
@navbar-default-toggle-border-color: transparent;

在窄視口顯示效果如下：

接下來，需要把右側(cè)的 All Departments鏈接到左側(cè)（折疊狀態(tài)下）。Bootstrap 專門有一個類就是為了這個目的。

打開 html 文檔，找到包含 All Departments 的標(biāo)記，把類 pull-right 改為 navbar-right 就可以了。

5.2 調(diào)整水平導(dǎo)航條

在大中型屏幕中，導(dǎo)航條水平排列在 Logo 下面。我們希望此時的導(dǎo)航條呈現(xiàn) @brand-primary 變量中設(shè)置的藍色背景。為此，必須要翻轉(zhuǎn)鏈接和文本的顏色，即由淺變深。

我們要使用 Bootstrap 的 inverted-navbar 變量和樣式。

(1) 打開 _variables.less，找到注釋Inverted navbar，會發(fā)現(xiàn)一些與默認導(dǎo)航條所用類似的變量。我們就通過它們來給擴展后的導(dǎo)航條應(yīng)用顏色。

(2) 按照如下所示調(diào)整變量：

//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @gray-lightest;
@navbar-inverse-bg: @brand-primary;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @navbar-inverse-color;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg,5%);

調(diào)整好這些變量后，只要把它們應(yīng)用給擴展導(dǎo)航即可。謂詞得寫幾行自定義的LESS代碼?？紤]到這種顏色切換屬于頁頭區(qū)配色的變化，所以我們把代碼寫到 _banner.less 中。

(3) 打開 _banner.less 并添加一個新的帶注釋的區(qū)塊：

//Apply .navbar-inverse styles to the enpanded navbar
@media (min-width: @grid-float-breakpoint){
 .navbar-default {
 .navbar-inverse();
 }
}

這個媒體查詢使用 @grid-float-breakpoint 變量確定了應(yīng)用新規(guī)則的最小視口寬度。因為我們已經(jīng)在導(dǎo)航條中添加了 navbar-default 類，所以可以直接使用這個類作為選擇符?；烊?.navbar-inverse() 則把在 _navbar.less 中定義的樣式 .navbar-inverse 應(yīng)用給了這個媒體查詢中的導(dǎo)航條。

保存編譯后，可以看到在中大型屏幕中，可以看到導(dǎo)航條的藍色背景和淺色文本：

可以看到顯示效果中導(dǎo)航條兩端的圓角，我們需要把這些樣式去掉。為此，打開 _variables.less，修改變量@navbar-border-radius：

復(fù)制代碼代碼如下:

@navbar-border-radius: 0;

最后，我們把文本轉(zhuǎn)換為大寫形式，稍微縮小一點，再加粗。

在 _banner.less 中，把如下代碼添加到 .navbar-inverse() 混入后：

@media (min-width: @grid-float-breakpoint){
 .navbar-default {
 .navbar-inverse();
 .navbar-nav > li > a {
 text-transform:uppercase;
 font-size:82%;
 font-weight: bold;
 }
 }
}

其顯示效果如下：

6.設(shè)計復(fù)雜的響應(yīng)式布局

假設(shè)我們在剛剛結(jié)束的客戶會面中做出了承諾，要把主頁內(nèi)容分成三層，按照重要程度排序。

□在中大型視口中，所有內(nèi)容將分布在三欄中。

□在較窄的視口中，這些欄將從上到下排成一欄。

□ 而在平板電腦的視口中，并排的只有兩欄，第三欄水平放到它們下面。

作為起點，我們修改原來的主頁內(nèi)容，把其分為三欄，并適量添加內(nèi)容，修改后代碼如下：

<div role="main">
 <div class="container page-contents">
 <div class="row">
 <div class="col-sm-4 clearfix">
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 <li data-target="#carousel-example-generic" data-slide-to="3"></li>
 </ol>
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="img/okwu-sm.jpg" alt="OKWU.edu Homepage">
 </div>
 <div class="item">
 <img src="img/okwu-athletics-sm.jpg" alt="OKWU Athletics Homepage">
 </div>
 <div class="item">
 <img src="img/bartlesvillecf-sm.jpg" alt="Bartlesville Community Foundation">
 </div>
 <div class="item">
 <img src="img/emancipation-sm.jpg" alt="Emancipation Stories">
 </div>
 </div>
 <!-- /.carousel-inner -->
 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="icon fa fa-chevron-left"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="icon fa fa-chevron-right"></span>
 <span class="sr-only">Next</span>
 </a>
 </div>
 <!-- /#homepage-feature.carousel -->

 <h2>Featured Content</h2>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget.</p>
 <p><a class="btn btn-primary pull-right" href="#">Learn more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 </div>
 <div class="col-sm-4 clearfix">
 <h3>Welcome!</h3>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>

 <h3>Recent Updates</h3>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>

 <h3>And another thing</h3>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 </div>
 <div class="col-sm-4 clearfix">
 <h4>Don't Miss!</h4>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 <h4>Check it out</h4>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 <h4>Finally</h4>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 </div>
 </div>
 </div>
 </div>

修改后，中寬屏顯示效果：

窄屏顯示效果如下：

6.1 調(diào)整中、寬布局

當(dāng)前，在中款時口中，三欄是等寬的，而且字體大小、按鈕大小，還有顏色都一樣。結(jié)果就是沒有層次感。

要實現(xiàn)內(nèi)容從視覺上的分層，可以調(diào)整欄寬、字體大小，還有顏色。我們先從調(diào)整欄寬開始。

(1) 打開 html文件，我們可以看到我們的分欄都是的類col-sm-4。這表示當(dāng)前欄是父元素寬度的三分之一，從小視口（764px）及以上寬度開始。

我們想在中大視口（992px及以上）內(nèi)保留三欄，而且希望第一欄比另兩欄寬。

(2) 把第一欄的欄寬類設(shè)為 col-md-5，其他兩欄分別為 col-md-4 和 col-md-3.

(3) 保存，刷新，可以看到以寬度分層的三欄：

很明顯，中間和第三欄的按鈕并沒有清除。下一步就來調(diào)整這些按鈕，還有字體大小。

6.2 調(diào)整標(biāo)題、字體大小和按鈕

我們先來調(diào)整標(biāo)題，以便它們清除自己上方的按鈕，目前這些按鈕都浮動了右側(cè)。為此，要用到之前新建的用于管理頁面內(nèi)容細節(jié)的 _page-content.less。

(1) 在 _page-content.less 添加以下代碼：

復(fù)制代碼代碼如下:

div[role="main"]{ [class*="col-"]{ h1,h2,h3,h4 { clear: both; //清除浮動 padding-top: 20px; &:first-child { //首項對齊 margin-top: 0; padding-top:0; } } }}

(2) 這樣就清除了標(biāo)題標(biāo)簽的浮動，并使三欄的最頂部標(biāo)題對齊，器顯示效果如下：

6.3 增大主欄

為了突出主欄，我們首先主欄內(nèi)容的字體大小。

(1) 打開_variables.less，修改變量@font-size-large。

復(fù)制代碼代碼如下:

@font-size-large: ceil((@font-size-base * 1.15)); // ~16px

(2) 在 _page-contents.less，添加如下代碼，以利用前一步設(shè)定的字體大?。?/p>

復(fù)制代碼代碼如下:

.content-primary { font-size:@font-size-large;}

(3) 打開 html文檔，在主頁第一欄填上該CSS:

復(fù)制代碼代碼如下:

接下來調(diào)整按鈕的顏色，要用到紅色的 @brand-feature 變量。還需要利用 Bootstrap 在 mixins.less 中提供的方便的混入。

(1) 首先，準(zhǔn)備一組新的按鈕變量。在 _variables.less 中，//== Buttons下面，復(fù)制三個 @btn-primary-變量，將 -primary- 改為 -feature- ，并使用 @brand-feature 作為背景色：

@btn-feature-color: #fff;
@btn-feature-bg: @brand-feature;
@btn-feature-border: darken(@btn-feature-bg, 5%);

(2) 然后沒創(chuàng)建一個文件來保存自定義按鈕的樣式。新建 _buttons-custom.less 文件并根據(jù) bootstrap/buttons.less 中的混入寫一個下面這樣的混入調(diào)用：

.btn-feature {
 .button-variant(@btn-feature-color;@btn-feature-bg;@btn-feature-border);
}

(3) 保存文件，并在 __main.less 導(dǎo)入此文件:

復(fù)制代碼代碼如下:

@import "_buttons-custom.less";

(4) 在html文檔中把第一欄的按鈕的btn-primary 類改為 btn-feature 類。并給按鈕填上 btn-lg 類，使按鈕變大些。

復(fù)制代碼代碼如下:

現(xiàn)在我們可以看到起顯示效果如下：

6.4 調(diào)整第三欄

我們還需要調(diào)整下第三欄，縮小其字體，同時讓按鈕不那么突出。

(1) 和前面一樣，先在 _variables.less, 調(diào)整 @font-size-small 變量。只是為了字體大小有差別，但不是那么大。

復(fù)制代碼代碼如下:

@font-size-small: ceil((@font-size-base * 0.90)); // ~12px

(2) 然后在 _page-content.less 中應(yīng)用該變量：

.content-tertiary {
 font-size:@font-size-small;
}

(3) 然后給主頁的第三欄應(yīng)用該類：

復(fù)制代碼代碼如下:

(4) 再接著，把第三欄的所有按鈕的 btn-primary 類改為 btn-default，并使用 btn-xs 縮小其尺寸：

復(fù)制代碼代碼如下:

(5) 最后，我們編輯下其按鈕的顏色，把按鈕的背景顏色改為淺灰色，同時調(diào)整字體顏色和邊框：

@btn-default-color: @gray;
@btn-default-bg: @gray-lightest;
@btn-default-border: darken(@btn-default-bg,5%);

這樣，現(xiàn)在頁面的層次已經(jīng)很清晰了，從左到右一次是主內(nèi)容、此內(nèi)容和第三欄。

再看看我們的設(shè)計在小屏幕單欄布局時的樣子：

在窄視口中，三欄布局變成了垂直排列的一欄，主內(nèi)容在上，然后是次內(nèi)容和第三欄。那么剩下所要做的，就是對設(shè)計精雕細琢，以便讓它在不同設(shè)備和視口中體驗更佳。

6.5 針對多個視口進行微調(diào)

無論在什么視口，通常都應(yīng)該在頁面中提供一些留白。另外，每個區(qū)塊的邊框最好也有所標(biāo)示。

(1) 首先，在內(nèi)容上下各添加一些內(nèi)邊距。給 main 添加一些內(nèi)邊距，這個內(nèi)邊距適用于所有視口，所以不必使用媒體查詢：

div[role="main"]{ 
 padding-top: 20px;
 padding-bottom: 40px;
 ...

(2) 然后，設(shè)置分欄在單欄布局時清除上方的浮動元素。如果不設(shè)置，第二欄和第三欄可能會覆蓋緊上方的按鈕。這些樣式要卸載媒體查詢中，以便限制它只應(yīng)用到窄視口：

//Make columns clear floats in narrow viewport single-colomn layout
 @media (max-width: @screen-sm-min){
 [class*="col-"]{
 clear: both;
 }
 }

這樣，主內(nèi)容區(qū)收工了。

7.復(fù)雜的頁腳

接下來我們要實現(xiàn)一個復(fù)雜的多用途的頁腳，頁腳包括：指向網(wǎng)站三個重要欄目的三組鏈接、About Us 文本、社交媒體圖標(biāo)，還有 Logo。

7.1 準(zhǔn)備標(biāo)記

我們先從準(zhǔn)備標(biāo)記著手。頁腳的目的是對用戶盡可能有用，我們修改頁腳代碼如下：

<footer role="contentinfo">
 <div class="container">
 <div class="row">
 <div class="col-md-2">
 <h3>Categories</h3>
 <ul>
 <li><a href="javascript:;">Shoes</a></li>
 <li><a href="javascript:;">Clothing</a></li>
 <li><a href="javascript:;">Accessories</a></li>
 <li><a href="javascript:;">Men</a></li>
 <li><a href="javascript:;">Women</a></li>
 <li><a href="javascript:;">Kids</a></li>
 <li><a href="javascript:;">Pets</a></li>
 </ul>

 </div>
 <div class="col-md-2">
 <h3>Styles</h3>
 <ul>
 <li><a href="javascript:;">Athletic</a> </li>
 <li><a href="javascript:;">Casual</a></li>
 <li><a href="javascript:;">Dress</a></li>
 <li><a href="javascript:;">Everyday</a></li>
 <li><a href="javascript:;">Other Days</a></li>
 <li><a href="javascript:;">Alternative</a></li>
 <li><a href="javascript:;">Otherwise</a></li>
 </ul>
 </div>
 <div class="col-md-2">
 <h3>Other</h3>
 <ul>
 <li><a href="javascript:;">Link</a></li>
 <li><a href="javascript:;">Another link</a></li>
 <li><a href="javascript:;">Link again</a></li>
 <li><a href="javascript:;">Try this</a></li>
 <li><a href="javascript:;">Don't you dare</a></li>
 <li><a href="javascript:;">Oh go ahead</a></li>
 </ul>
 </div>
 <div class="about col-md-6">
 <h3>About Us</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p>
 <a class="btn btn-default btn-xs pull-right" href="javascript:;">Learn more <span class="fa fa-circle-arrow-right"></span></a>
 </div>
 </div>

 <ul class="social">
 <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
 <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
 <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
 <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
 <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
 </ul>

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

修改下 _footer.less 中之前的樣式文件如下：

footer[role="contentinfo"] { ...
 //text-align: center;
}

現(xiàn)在在980px及更大的視口中，頁腳中的欄如下所示：

7.2 調(diào)整布局適應(yīng)平板

視口在768px到980px之間時的布局，Bootstrap 把這個區(qū)間界定為小斷點，對應(yīng)變量 @screen-sm 和 col-sm-網(wǎng)格類。在這個寬度內(nèi)，單欄布局會導(dǎo)致不必要的空白，如下圖所示：

要改進這個布局，可以讓三組鏈接浮動起來。使用 Bootstrap 的類 col-sm-4，可以將一欄設(shè)置為三分之一寬，使用 col-sm-12 將About Us設(shè)置為全寬：

<div class="col-md-2 col-sm-4">
...
<div class="col-md-2 col-sm-4">
...
<div class="col-md-2 col-sm-4">
...
<div class="about col-md-6 col-sm-12">

保存并在小視口中測試，可以看到結(jié)果如下：

7.3 修整細節(jié)

對于頁腳，我們還想修整幾個地方：

□ 修整三組鏈接的外觀；

□ 調(diào)整內(nèi)外邊距；

□ 反轉(zhuǎn)配色方案，與導(dǎo)航條保持一致。

要完成以上工作，得寫一些自動以的樣式。我們準(zhǔn)找層疊原理，先寫一些針對頁腳的通用規(guī)則，然后在過渡到特殊規(guī)則。

(1) 在編輯器中打開 _footer.less 以添加針對頁腳的自定義樣式。

(2) 現(xiàn)在開始添加針對復(fù)雜頁腳的樣式。首先，縮小頁腳字體大小，反轉(zhuǎn)顏色與導(dǎo)航條對應(yīng)——藍色背景，淺色文本。我們先設(shè)置成這樣的顏色，然后再把它們稍微調(diào)暗一點。

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

(3) 接下來調(diào)整鏈接和按鈕，以適應(yīng)新的配色。同樣要把規(guī)則放在footer[role="contentinfo"] 選擇符下：

footer[role="contentinfo"] { ...
 a {
 color: @navbar-inverse-color;
 &:focus,
 &.hover,
 &:active{
 color: @navbar-inverse-link-hover-color;
 }
 }
 .btn-default {
 color: darken(@navbar-inverse-bg,18%) !important;
 }
}

(4) 然后是四個h3標(biāo)題，調(diào)整它們的字號，去掉外邊距，并把文本轉(zhuǎn)換成大寫：

footer[role="contentinfo"] {
 ...
 h3 {
 font-size: 120%;
 margin-bottom:4px;
 text-transform: uppercase;
 }
}

(5) 接著，再去掉鏈接列表前的項目符號：

footer[role="contentinfo"] {
 ...
 ul {
 list-style: none;
 padding: 0;
 margin: 0;
 }
}

(6) 再然后，調(diào)整底部的Logo，使其居中：

footer[role="contentinfo"] { 
 ...
 .footer-brand {
 margin: 10px;
 text-align: center;
 }
}

(7) 最后，調(diào)整社交媒體圖標(biāo)。就是添加一些上內(nèi)邊距，調(diào)整一下顏色，以便與新配色方案協(xié)調(diào)一致。因為圖標(biāo)使用的是 Font Awesome 字體，所以只要調(diào)整顏色和背景顏色的值即可：

ul.social {
 ...
 padding:20px 0 0;
 ...
 > li {
 ...
 background-color:darken(@navbar-inverse-bg,27%);
 > a {
 ...
 color: darken(@navbar-inverse-color,18%);
 }
 &:hover {
 ...
 background-color:darken(@navbar-inverse-bg,32%);
 color:@navbar-inverse-link-hover-color;
 }
 }
}

保存，編譯，刷新。以下是頁腳在中大型屏幕中的結(jié)果：

然后是在小屏幕中的效果：

最后是在超小屏幕中的效果：

8.小結(jié)

此次我們又掌握了一些利用 Bootstrap 的新技術(shù)。簡單總結(jié)如下：

□ 為復(fù)雜的響應(yīng)式導(dǎo)航條添加樣式，使其在中大視口中出現(xiàn)在 Logo 下方，而在小屏幕中又能折疊起來。

□ 構(gòu)建了自定義的響應(yīng)式實用導(dǎo)航條，文本和圖標(biāo)都能創(chuàng)造性地適應(yīng)較大和較小的屏幕。

□ 為頁面的主內(nèi)容設(shè)計了響應(yīng)式布局，是三欄內(nèi)容主次分明。

□ 構(gòu)建了一個復(fù)雜的頁腳，有效地組織了多個鏈接塊，還有跨視口的文本段落。

□ 以導(dǎo)航條配色為基礎(chǔ)增強了頁腳的配色。

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

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

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

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

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

您可能感興趣的文章: