一、Bootstrap简介
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的msnBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
二、Bootstrap特点
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
三、Bootstrap响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
四、Bootstrap响应式布局的操作
（1）下载Bootstrap3
首先我们使用的开发平台是Windows7+Eclipse for J2EE 首先要下载Bootstrap3，可以到Bootstrap中文网下载，只需要下载用于生产环境的 Bootstrap，感兴趣还可以下源码研究： http://v3.bootcss.com/getting-started/#download 另外要注意，要使用Bootstrap必须要有jQuery，可以从Bootstrap中文网的CDN里面保存jquery的压缩版即可，地址是： http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js 准备后就开始配置项目。
（2）为项目配置Bootstrap3本地配置
本地配置
首先利用Eclipse建立一个动态Web项目，在WebContent下建立bootstrap文件夹和jquery文件夹，然后把对应的文件复制进去即可。 注意：可能你复制jquery的js文件进去后，Eclipse报错，这个是因为Eclipse对JavaScript验证出错，可以把这个文件排除验证，或者直接无视Eclipse的报错。
接下来建立一个index.jsp文件，引入Bootstrap3。
把JS文件放在<BODY>的最后，加快页面显示。
利用Bootstrap中文网CDN配置
如果觉得上述过程过于复杂，实际建站又想节省点流量，可以利用Bootstrap中文网的CDN配置（个人建议还是本地配置靠谱）。
Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。
但要注意，要实现移动设备响应还要附加一个meta(必须写在其他meta前面)。
配置好后就可以开始使用Bootstrap3的全局CSS样式、Javascript插件和Bootstrap组件。
（3）栅格系统
接下来我们了解如何利用Bootstrap的栅格系统实现响应式布局：
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
学习Bootstrap一定理解栅格系统的原理，才能实现响应式布局。
首先栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，我们这里只使用行（row）。
行（row）必须包含在 .Container （容器：固定宽度）或 .container-fluid （流式容器：固定宽度转换为100% 宽度）中。
而在Bootstrap3中主要吧屏幕分成了三种（这里以行（row）来说明）：
.col-xs-* 超小屏幕，手机 (宽度<768px)
.col-sm-* 小屏幕，平板 (宽度＜768px)
.col-md-* 中等屏幕，桌面显示器 (宽度＜992px)
不管在哪种屏幕上，栅格系统都会自动的分12列
.col-xs-* 和.col-sm-*和.col-md-* 后面跟的参数表示在当前的屏幕中占的列数。
了解栅格系统就能初步实现响应式布局了。