2.3 案例：尝试Bootstrap布局企业导航区

2.3.1 案例展示

淮安蒸丞文化传媒有限公司是一家做文化活动策划、会议策划、新媒体设计与设备租赁的新公司，公司的网站导航栏要求设置网站首页、公司简介、业务范围、产品介绍、经典案例及关于我们等栏目。现根据业务需要初步设计网站首页的头部与banner区域，效果如图2-6所示。

2.3.2 案例分析

该页面主要由顶部的导航nav部分和主体banner区域组成，所以，本案例可基于基本的Bootstrap模板来完成，具体可分为3步。

第1步：基于Bootstrap模板创建网页基本页面。

第2步：依据页面效果创建HTML元素，并初次尝试使用Bootstrap的框架样式。

第3步：根据需要添加页面所需的样式。

2.3.3 案例实现

第1步：基于Bootstrap模板创建网页基本页面。

基于Bootstrap模板创建网页，删除部分注释页面，代码如下。

第2步：创建HTML元素，使用Bootstrap的样式。

根据页面所需效果创建HTML元素。

运行代码，页面效果如图2-7所示。

依据HTML元素调用Bootstrap的页面CSS样式代码，不断调试页面效果，调整后的页面代码如下。

运行代码，页面效果如图2-8所示。

其中导航nav的类使用了navbar、navbar-default、navbar-fixed-top这3个样式，navbar是一个基本的样式效果，如图2-9所示；navbar-default是一种默认的导航效果，如图2-10所示；navbar-fixed-top实现导航固定在页面顶端。

第3步：根据需要添加页面所需的样式。

参照图2-6所示的页面效果进行对比，可以看到页面的内容被覆盖住了，需要调整一下CSS样式。

如果想将navbar的样式改成黑色，只需要将navbar-default变成navbar-inverse，页面效果如图2-11所示。

读者还可以尝试navbar-brand、navbar-collapse等其他样式的效果。

此外，图片的img-responsive类实现了图片的响应式展示。

2.3.4 案例拓展

该案例还可以将导航栏设置为响应式的，页面效果如图2-12所示。

为导航栏添加响应式，要折叠的内容必须包裹在带有.collapse、.navbar-collapse类的<div>中。折叠起来的导航栏实际上是一个带有.navbar-toggle类和两个data属性元素（第一个是data-toggle，用于告诉JavaScript需要对按钮做什么；第二个是data-target，指示要切换到哪一个元素）的按钮，还包含3个带有.icon-bar类的<span>创建的所谓“汉堡”按钮，这些会切换为包含.nav-collapse类的<div>元素。为了实现以上这些功能，必须包含Bootstrap折叠（Collapse）插件。具体实现代码如下。

运行代码，即可实现所需要的导航效果。