上一章有隊個人站點站點進行一些優化。本章，輪到我們充實這個作品站點了，補充一些項目，從而展示我們的能力。話句話說，我們要構建一個相對復雜的企業網站主頁。
下面有幾個成功企業的網站：
□ Zappos (http://www.zappos.com/)
□ Amazon (https://www.amazon.com/)
盡管這些網站網站各有特色，但共同的一點就是它們都很復雜。
如果按照區域划分，可以將這些網站的主頁分成三部分。
□ 頁頭區：這一部分包含Logo、帶下拉菜單的主導航、二級和實用鏈接導航，以及登錄和注冊選項。
□ 主內容區：這一部分布局復雜，至少三欄。
□ 頁腳區：包含多欄鏈接和信息。
我們必須能夠掌控這些復雜性。為此，需要充分利用 Bootstrap 的12欄響應式系統。
以下是我們打算要構造的設計在中、寬視口中的效果：
在窄視口中，頁面會相應變化，如下圖所示：
這樣，我們需要做以下這些事。
(1) 以【Bootstrap】2.作品展示站點 的個人站點作為起點。
(2) 完成復雜的頁頭區，包括 Logo、導航以及右上角的實用導航（桌面視口）。
(3) 在較窄的視口中，實用導航只顯示為圖標，與折疊后的響應式導航條並列。
(4) 要實現企業風格的配色方案。
(5) 調整桌面版和響應式導航條。
(6) 為主內容區和頁腳區設置復雜的多欄布局。
先做最核心的工作 —— 准備項目的啟動文件。
1. 准備啟動文件
我們直接把 前面的例子 作為啟動文件，然后在其之上進行修改就行了。（當然也可以直接提供的 本書源碼 ,然后解壓縮找到文件夾 04_Code_BEGIN ）
2.頁頭區
下面我們就從上到下，先來實現復雜的頁頭區，在前一個項目的基礎上包括以下特性：
□ 在桌面瀏覽器及較大視口中，讓站點 Logo 顯示在導航條之上。
□ 包含菜單項的導航條，每個菜單項又都包含下拉菜單。
□ 使用導航區。
□ 帶用戶名和密碼字段的登錄表單。
□ 注冊選項。一下是桌面瀏覽器中的目標結果：
窄視口中的目標結果如下：
讓我們開始吧。
2.1 包含下拉菜單的導航項
可以看到導航條是由下拉菜單的，所以我們先修改下對應的導航條。很明顯，導航項采用了下拉菜單。我們可以參考下官方文檔，先實現下拉菜單。
官方文檔：http://getbootstrap.com/components/#navbar
中文版文檔：http://v3.bootcss.com/components/#nav-dropdowns
(1) 根據文檔，我們實現第一個下拉菜單的代碼如下：
<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 可能出現在兩個地方，視情況而定：
□ 在桌面和寬屏幕中，顯示在導航條上方;
□ 在平板和手機屏幕中，顯示在響應式導航條內部。
利用 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" class="navbar navbar-default">標簽之間。
(3) 把這個 Logo 用 <div class="container">...</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/#responsive-utilities （中文文檔：http://v3.bootcss.com/css/#responsive-utilities）
下面我們就按照需求來應用這些類。
(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 調整導航條
現在導航條包含7項，每項又各有子菜單，體現了一個大型復雜網站的需求。
接下來，我們要把 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 添加使用導航
我們的設計需要提供幾個實用的導航鏈接，讓用戶可以登錄、注冊和查看購物車。
在中大型的視口中，我們把它們放到頁頭區的右上角，如下圖所示：
在較小的屏幕中，則把對應的鏈接圖標顯示在折疊后的導航條的最右端，如下圖所示：
說做就做。打開 html 文檔，在頁頭區添加實用導航項的標記，放在 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/#larger
保存修改並刷新頁面后，就可以看到新添加的 utility-nav 出現在 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) 然后再進行一些細節調整：
□ 為.banner-brand 類添加上內邊距，以增加頁頭區的高度。
□ 將頁頭區 container 的定位方式設置為 relative，以使它包含絕對定位的 utility-nav 元素。
□ 刪除無序列表的項目符號。
□ 向左浮動列表項
□ 將鏈接顯示為 inline-block 並添加內邊距。
□ 刪除懸停時的下划線。
完成上述調整的樣式規則如下：
//// 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;
}
}
}
}
}
}
保存修改並編譯。把瀏覽器窗口調整到桌面創建大小，然后刷新。應該能看到 utility-nav 元素出現在頁頭區的右上角位置。
待續...