响应式开发从原理到实战案例（七）：使用bootstrap V2.3.2实现响应式页面

实现的主要步骤：

1、去掉之前的样式文件，应用bootstrap的样式文件。



index.css样式文件可以不用了，全部采用bootstrap框架的样式

2、在body结束前，先后引入jquery和bootstrap.js



在body之前引入js文件，防止页面内容呈现缓慢
先引入jquery文件，bootstrap框架以来jquery

3、定义导航栏

<div class="navbar navbar-inverse navbar-fixed-top">
</div>

navbar:导航栏

navbar-inverse：黑色背景，白色文字

navbar-fixed-top：使用定位固定在页面上面

4、根据框架的规范，定义三个div嵌套关系



navbar：控制与外面的布局关系

navbar-inner：控制导航栏内部的布局关系

container：在bootstrap框架下，所有呈现的内容都是在container容器下定义

5、导航菜单



nav-collapse:导航菜单的折叠与伸缩

nav：导航菜单内容

active:激活的菜单项

6、导航按钮



btn:对按钮的修饰
btn-navbar:导航按钮样式
data-target:目标关联，可以通过类样式或id样式关联
data-toggle:目标的行为，collapse表示折叠和展开的行为
注意：导航按钮不是input标签而是H5新标签button

完整案例下载地址 bootstrap
V2.3.2实现响应式页面

~~~~~~~~~~~~~~~~~下一节《使用bootstrap
V3.3.7实现响应式页面》~~~~~~~~~~~~~~~~~