【读书笔记《Bootstrap 实战》】4.企业网站

上一章有对个人作品站点进行一些优化。本章，轮到我们充实这个作品站点了，补充一些项目，从而展示我们的能力。换句话说，我们要构建一个相对复杂的企业网站主页。

下面有几个成功企业的网站：

□ 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 包含下拉菜单的导航项