Bootstrap企业网站实战项目4

这篇文章主要为大家分享了Bootstrap企业网站实战项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

□ 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/

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

(1) 根据文档，我们实现第一个下拉菜单的代码如下：

 
 Shoes 
 
Action
Another action
Something else here
Separated link
One more separated link

可以看到效果如下：

(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 的链接和图片：

(2) 然后粘贴到导航条上方，在

标签和