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

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

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

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

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

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

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

盡管這些網站網站各有特色，但共同的一點就是它們都很復雜。

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

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

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

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

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

以下是我們打算要構造的設計在中、寬視口中的效果：

在窄視口中，頁面會相應變化，如下圖所示：

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

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

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

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

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

(5) 調整桌面版和響應式導航條。

(6) 為主內容區(qū)和頁腳區(qū)設置復雜的多欄布局。

先做最核心的工作 —— 準備項目的啟動文件。

1. 準備啟動文件

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

2.頁頭區(qū)

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

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

□ 包含菜單項的導航條，每個菜單項又都包含下拉菜單。

□ 使用導航區(qū)。

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

□ 注冊選項。一下是桌面瀏覽器中的目標結果：

窄視口中的目標結果如下：

讓我們開始吧。

2.1 包含下拉菜單的導航項

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

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

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

(1) 根據文檔，我們實現(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) 我們修改導航項。把bootstrap/navbar.less 的內容復制到_navbar.less 中，覆蓋原內容。然后找到注釋// Brand/project name，修改.navbar-brand的內邊距如下：

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

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

復制代碼代碼如下:

@navbar-height: 50px;

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

2.2 把 Logo 放到導航條上方

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

□ 在桌面和寬屏幕中，顯示在導航條上方;

□ 在平板和手機屏幕中，顯示在響應式導航條內部。

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

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

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

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

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

(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) 保存修改，刷新顯示，就可以在導航條上面看到新的Logo了：

下面我們需要調整 Logo，讓它只在必要時顯示。

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

復制代碼代碼如下:

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

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

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

下面我們就按照需求來應用這些類。

(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) 保存修改，刷新網頁?？梢钥吹?，在中、大型視口中，只會顯示 banner-brand 中的 Logo：

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

2.3 調整導航條

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

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

操作步驟是：我們先把 All Departments 菜單移除父元素 ul，并列排在原父元素 ul 后；然后使其包含在新的 ul 標簽內，新標簽的類名為 "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 添加使用導航

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

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

在較小的屏幕中，則把對應的鏈接圖標顯示在折疊后的導航條的最右端，如下圖所示：

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

<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 的用戶和購物車的圖標，并通過 fa-lg 類把它們的尺寸增大了33%。關于增大 Font Awesome 圖標的詳細說明，可以參考它的文檔：http://fontawesome.io/examples/

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

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

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

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

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

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

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

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

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

□ 向左浮動列表項

□ 將鏈接顯示為 inline-block 并添加內邊距。

□ 刪除懸停時的下劃線。

完成上述調整的樣式規(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;
 }
 }
 }
 }
 }
}

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

這些調整適合中大型的視口。下面我們針對折疊后的響應式導航條來添加樣式。

3.調整響應式導航

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

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

復制代碼代碼如下:

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

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

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

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

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

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

(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 標簽的媒體查詢。在使用LESS的情況下，可以精確的嵌套媒體查詢。在此要使用 @grid-float-breakpoint 變量，把 max-width 查詢設置為 @grid-float-breakpoint -1 ，因為這個變量的值意味著在它那么寬時，導航條就會從折疊變成擴展狀態(tài)。在這個媒體查詢中，使用實用類 sr-only 作為混入，對除屏幕閱讀器之外的所有設備隱藏文本。（參考文檔：http://getbootstrap.com/css/）

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

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

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

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

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

4.調整配色

我們希望網站的配色是標準的企業(yè)網站顏色：藍、紅、灰。下面我們把這些顏色放到變量里。

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

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

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

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

復制代碼代碼如下:

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

修改后效果如下：

5.調整折疊后的導航條配色

打開 _variables.less ，搜索// Navbar，在這里看到導航條用到的變量。這里指定的大多數標準值既對折疊后的響應式導航條有效，也對寬屏幕下擴展的導航條有效。

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

5.1 調整響應式導航條

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

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

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

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

// 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) 再調整 navbar-toggle 的樣式，刪除邊框和背景，調深導航條：

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

在窄視口顯示效果如下：

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

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

5.2 調整水平導航條

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

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

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

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

//=== 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%);

調整好這些變量后，只要把它們應用給擴展導航即可。謂詞得寫幾行自定義的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 變量確定了應用新規(guī)則的最小視口寬度。因為我們已經在導航條中添加了 navbar-default 類，所以可以直接使用這個類作為選擇符。混入 .navbar-inverse() 則把在 _navbar.less 中定義的樣式 .navbar-inverse 應用給了這個媒體查詢中的導航條。

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

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

復制代碼代碼如下:

@navbar-border-radius: 0;

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

在 _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.設計復雜的響應式布局

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

□在中大型視口中，所有內容將分布在三欄中。

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

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

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

<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 調整中、寬布局

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

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

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

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

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

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

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

6.2 調整標題、字體大小和按鈕

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

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

復制代碼代碼如下:

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

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

6.3 增大主欄

為了突出主欄，我們首先主欄內容的字體大小。

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

(1) 首先，準備一組新的按鈕變量。在 _variables.less 中，//== Buttons下面，復制三個 @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 文件并根據 bootstrap/buttons.less 中的混入寫一個下面這樣的混入調用：

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

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

復制代碼代碼如下:

@import "_buttons-custom.less";

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

復制代碼代碼如下:

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

6.4 調整第三欄

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

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

復制代碼代碼如下:

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

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

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

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

復制代碼代碼如下:

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

復制代碼代碼如下:

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

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

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

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

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

6.5 針對多個視口進行微調

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

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

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

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

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

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

7.復雜的頁腳

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

7.1 準備標記

我們先從準備標記著手。頁腳的目的是對用戶盡可能有用，我們修改頁腳代碼如下：

<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 調整布局適應平板

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

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

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

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

7.3 修整細節(jié)

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

□ 修整三組鏈接的外觀；

□ 調整內外邊距；

□ 反轉配色方案，與導航條保持一致。

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

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

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

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) 接下來調整鏈接和按鈕，以適應新的配色。同樣要把規(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標題，調整它們的字號，去掉外邊距，并把文本轉換成大寫：

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) 再然后，調整底部的Logo，使其居中：

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

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

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

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

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

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

8.小結

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

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

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

□ 為頁面的主內容設計了響應式布局，是三欄內容主次分明。

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

□ 以導航條配色為基礎增強了頁腳的配色。

此例顯示效果地址：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

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

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js表單元素checked、radio被選中的幾種方法(詳解)
下面小編就為大家?guī)硪黄猨s表單元素checked、radio被選中的幾種方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
基于js 本地存儲(詳解)
下面小編就為大家?guī)硪黄趈s 本地存儲(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
淺談webpack構建工具配置和常用插件總結
這篇文章主要介紹了淺談webpack構建工具配置和常用插件總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2020-05-05
前端如何利用CryptoJS實現(xiàn)數據信息的加密詳解
這篇文章主要給大家介紹了關于前端如何利用CryptoJS實現(xiàn)數據信息加密的相關資料,前端解密解密工具Cryptojs提供了前端加密解密的工作,包括常用的MD5、BASE64、SHA1、AES等加密解密方法,需要的朋友可以參考下
2023-11-11
js Calender控件使用詳解
這篇文章主要介紹了js Calender控件使用詳解,需要的朋友可以參考下
2015-01-01
js中的閉包實例展示
閉包是js中的一大特色，也是一大難點。下面這篇文章主要給大家介紹了關于js中閉包的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起看看吧
2018-11-11
小程序實現(xiàn)五星點評效果
這篇文章主要為大家詳細介紹了小程序實現(xiàn)五星點評效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
關于動態(tài)執(zhí)行代碼(js的Eval)實例詳解
下面小編就為大家?guī)硪黄P于動態(tài)執(zhí)行代碼(js的Eval)實例詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JS如何將數字類型轉化為沒3個一個逗號的金錢格式
本文為大家介紹下如何將數字類型轉化為沒3個一個逗號的金錢格式，下面是具體的實現(xiàn)
2014-01-01
Web開發(fā)必知Javascript技巧大全
　JavaScript是一個絕冠全球的編程語言，可用于Web開發(fā)、移動應用開發(fā)（PhoneGap、Appcelerator）、服務器端開發(fā)（Node.js和Wakanda）等等，通過本文給大家介紹Web開發(fā)必知Javascript技巧大全，需要的朋友參考下吧
2016-02-02