使用Bootstrap搭建响应式布局

一、关于bootstrap

bootstrap是Twitter公司推出的一款相对流行的前端框架，使用bootstrap可以快速搭建整洁大方、美观、可响应的用户界面。

[响应式布局]：同一套代码可以适应不同分辨率的设备。bootstrap使用栅格系统来实现。container>row>col···：容器>行>列。

二、Bootstrap开发包的结构

css：该文件夹提供了bootstrap预先定义好的css样式，方便开发者轻松地使用，从而迅速搭建用户界面。

js：该文件夹提供了支持bootstrap所需的JavaScript文件，例如使用响应式导航，必须要导入bootstrap.min.js文件。注意：由于bootstrap是基于jQuery的，使用bootstrap.min.js文件之前一定要先导入JQuery文件。

fonts：该文件夹提供了许多bootstrap的字体文件，可以轻松使用bootstrap中提供的图标。

小贴士：文件拓展名含min的是经过压缩的文件，建议导入含min的bootstrap文件。经过压缩后，文件能够更快加载，既安全又能够提升性能。

使用bootstrap将bootstrap在官网下载用于生产的开发包解压复制在项目下即可，在HBuilder环境中目录如下：

三、尝试建议第一个bootstrap项目

按照步骤，依次在头文件head中使用l