2.3 案例：尝试Bootstrap布局企业导航区
2.3.1 案例展示
淮安蒸丞文化传媒有限公司是一家做文化活动策划、会议策划、新媒体设计与设备租赁的新公司，公司的网站导航栏要求设置网站首页、公司简介、业务范围、产品介绍、经典案例及关于我们等栏目。现根据业务需要初步设计网站首页的头部与banner区域，效果如图2-6所示。
图2-6 网站响应式页面效果
a) 宽屏状态下的页面效果 b) 手机上的页面效果
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-7 HTML页面效果
运行代码，页面效果如图2-8所示。
图2-8 HTML页面结合Bootstrap的CSS样式效果
其中导航nav的类使用了navbar、navbar-default、navbar-fixed-top这3个样式，navbar是一个基本的样式效果，如图2-9所示；navbar-default是一种默认的导航效果，如图2-10所示；navbar-fixed-top实现导航固定在页面顶端。
图2-9 navbar是一个基本的样式效果
图2-10 navbar与navbar-default的联合样式效果
第3步：根据需要添加页面所需的样式。
参照图2-6所示的页面效果进行对比，可以看到页面的内容被覆盖住了，需要调整一下CSS样式。
如果想将navbar的样式改成黑色，只需要将navbar-default变成navbar-inverse，页面效果如图2-11所示。
图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）插件。具体实现代码如下。
图2-12 网站响应式页面效果
a) 宽屏状态下的页面效果 b)手机上的页面效果
运行代码，即可实现所需要的导航效果。