一、概述
首先我们来说说 Bootstrap 是什么。
进入 Bootstrap 的官方网站（http://getbootstrap.com/），我们可以看到这样一句话：Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 这句话的意思是：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目。大家也可进入 Bootstrap 中文网（http://www.bootcss.com/）学习 Bootstrap 的框架内容。
二、优势
Bootstrap是由 Twitter 发布并开源的前端框架，使用非常火爆。据我们调查，目前在各大中小型公司和企业中，前端项目非常多的都在全面推行使用 Bootstrap。当然如此火爆自然有它的道理，下面为大家简单的分析一下：
首先，Bootstrap 出自 Twitter。由大公司发布，并且完全开源，自然久经考验，减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上，不重复造轮子。
其次，Bootstrap 的代码有着非常良好的代码规范。在使用 Bootstrap 时也有助于我们去养成良好的编码习惯，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。
第三，Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。
第四，响应式开发。Bootstrap响应式的栅格系统（Grid System）非常先进，它已经帮你搭建好了实现响应式设计的基础框架，并且非常容易修改，如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手响应式布局的设计。
第五，丰富的组件与插件。Bootstrap 的 HTML组件和 JS组件非常丰富，并且代码简洁，非常易于修改，如果你觉得它设计的样子不是你所想要的，你完全可以在其基础之上修改成自己想要的任何样子。由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的JS插件，这就使得开发的工作效率得到极大提升。
以上这些都是使用 Bootstrap 所带来的优势。当然 Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。
三、体验
我们来看两个使用 Bootstrap 布局的页面。
第一个页面：http://home.baidu.com/。
我们仅看页首导航部分，在PC端浏览器查看时效果如下：
打开开发者工具，模拟移动设备端在宽度为 768 像素下的查看效果：
我们发现，页首导航条现在不见了，在首行居中部分显示了 LOGO 图片，最前边显示了一个可折叠/展开的菜单，将菜单展开：
原来被隐藏的页首导航栏被折叠到了菜单中。
这是非常典型的一个响应式的使用，因为如果保持导航布局结构，在低分辨率显示情况下，导航布局宽度可能会超出水平显示的宽度，那么浏览器中就会出现水平滚动条，在移动设备端，这是不友好的体现。如果折叠到菜单中，当需要使用时再展开，通过上下滑动来选择菜单导航，这样既使得页面布局更简洁，又提升了用户体验，所以这是经常使用到的响应式布局结构。
第二个页面：https://www.fairchildsemi.com/。
在PC端浏览器中（水平1280像素分辨率）打开页面，显示效果如下：
切换到移动设备端在水平方向 768 像素下查看显示效果：
大家仔细比较这两张图，在顶部通栏显示的效果、LOGO行显示效果及导航栏显示效果都发生了变化，在低分辨率下查看时，页面会变得更加简洁，这也体现的是响应式布局的优势。
该页面导航栏下方是通栏的大图轮播效果，切换不同显示分辨率的情况下，该轮播效果都能自动适应各不同分辨率，这是通过 Bootstrap 中的JS插件来完成的。如果是原生的JS写法，这个轮播图可能就要写两个小时，使用 Bootstrap 的情况，即使使用不熟练，也能够在10分钟以内完成该轮播图效果了。
四、示例
好，体会了一下 Bootstrap 在开发时带来的好处后，下面我们来自己动手，编写一个使用 Bootstrap 布局的登录页面。
俗话说，工欲善其事，必先利其器。要使用 Bootstrap 就需要先下载 Bootstrap 用于生产环境的资源。大家可以从 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下载用于生产环境的 Bootstrap。
下载的资源目录结构：
css 目录中放置的是使用 Bootstrap 时所需要使用到的全局的CSS样式表文件，包括编译好的 css 文件、压缩过的 css 文件，还提供了 css 的源码映射表 .map文件；fonts 目录中放置的是字体图标的文件；js 目录中放置的是用于开发环境的 js 插件。需要注意的是，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以jQuery必须在 Bootstrap 之前引入。
将下载好的资源放到自己项目目录下：
新建登录的 html 页面，为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签，再使用 <link> 引入外部 css 样式表文件。源码如下：
对于登录表单的布局，我们使用 Bootstrap 的栅格系统（Grid System）来实现。
栅格系统会随着屏幕或视口（viewport）尺寸的变化，自动分为最多12列，我们可以直接使用 Bootstrap 中预定义的类来实现布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，待布局的内容就可以放入这些创建好的布局中。
“行（row）”必须包含在布局容器 .container （固定宽度）或 .container-fluid （100% 宽度）中，通过行可以在水平方向创建一组“列（column）”，待布局的内容就放置于“列”中。“行”可以使用预定义类 .row 来创建，“列”也有类似的预定义类，规则如下表所示：
使用“列”的类前缀，后跟布局所占据列宽（1~12）即可。那么我们可以设计如下布局：
登录表单在中等屏幕时布局占用6列的宽度，在小屏幕时占用8列宽度。如下所示：
但通常我们会将登录表单在水平方向居中位置显示出来，当然方式也有多种，可以使用栅格系统中列的偏移来完成。使用 .col-md-offset-* 类可以将列向右侧偏移，通过使用 * 选择器为当前元素增加了左侧的边距（margin），如.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。那么上述布局可以更新为：
五、小结
从以上示例来看，Bootstrap 已为开发者预定义了非常多的有用的类，开发者只需要在使用过程中熟记这些类名即可，当然也可以在已经定义样式的基础上再来实现定制，这就需要十分熟练的使用了。
Bootstrap 中除了这些预定义好的类之外，还有非常多的其它组件与JS插件可以使用，大家可以继续通过 Bootstrap 文档进行查阅。