上一章有对个人作品站点进行一些优化。本章，轮到我们充实这个作品站点了，补充一些项目，从而展示我们的能力。换句话说，我们要构建一个相对复杂的企业网站主页。
下面有几个成功企业的网站：
□ Zappos ()
□ 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 包含下拉菜单的导航项
可以看到导航条是由下拉菜单的，所以我们先修改下对应的导航条。很明显，导航项采用了下拉菜单。我们可以参考下官方文档，先实现下拉菜单。
官方文档：
中文版文档：
(1) 根据文档，我们实现第一个下拉菜单的代码如下：
<li> <a href="#" data-toggle="dropdown">Shoes <span></span> </a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></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 href="https://www.jb51.net/index.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /> </a>
(2) 然后粘贴到导航条上方，在<header role="banner">标签和<nav role="navigation">标签之间。
(3) 把这个 Logo 用<div>...</div> 包装起来，使其被限制在 Bootstrap 居中的网格内部。
(4) 编辑 Logo 链接，将其类名由 navbar-brand 改为 banner-brand 。然后把图片宽度改为180
<div> <a href="https://www.jb51.net/index.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /> </a> </div>
(5) 保存修改，刷新显示，就可以在导航条上面看到新的Logo了：
下面我们需要调整 Logo，让它只在必要时显示。
在 _variables.less 中，找到变量 @grid-float-breakpoint ，并修改为：
复制代码 代码如下:
@grid-float-breakpoint: @screen-md-min;