Bootstrap 最初是2011年由 Twitter 的两个设计师自己捣鼓出来的一款开源的前端框架，现在已经成为了是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
在此之前，想要创建一个响应式布局的网站，需要自己去研究 Respond.JS、JQuery 插件、CSS3 的 media query 等，往往搞得头痛脑热的时候，发现还有一个浏览器兼容性问题没有解决。最后大部分时间不是花在寻找插件的路上，就是花在没完没了的兼容性问题上。现在有了 Bootstrap，这些问题就可以通通丢给它了，我们只要掌握如何通过 Bootstrap 去搭建我们的前端页面就OK了。
Bootstrap 是一整套工具，下载后会发现其中包含了 JS、CSS以及一些资源文件。使用之后，你就会明白它帮我们做的就是预先定义了一些常用的 CSS 类，我们在使用的时候只需要使用这些预定义的类就可以搭建出我们想要的界面了。
Bootstrap 支持几乎所有的主流浏览器（内核），同时支持 IE 8及以上的版本（部分 HTML5 的特性可能无法实现）。
摘自官网
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
快速使用
1、在官网下载最新的编译和压缩好的版本（写本文时的最新版本为 v3.2.0）。
2、在本地解压后会发现如下文件结构。
3、构建自己的页面
3.1、使用 HTML5 的文档类型
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
因为Bootstrap会使用许多HTML5的特性，所以必须要支持HTML5。
3.2、在 head 中加入viewport标签 引入 bootstrap.min.css
<meta name="viewport" content="width=device-width, initial-scale=1">
3.3、在 head 中加入 X-UA-Compatible，以防止 IE 的兼容模式对页面渲染的影响
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3.4、引入 bootstrap.min.css
<link href="css/bootstrap.min.css" rel="stylesheet">
3.5、引入bootstrap.min.js
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script>
因为 bootstrap 基于 Jquery,所以必须加上对 JQuery 的引用。
官方提供了一个最基本的页面模板，大家可以完全在此基础上添加进自己的页面逻辑：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
容器类
上面说了一个最基本的页面是如何搭建的。从本节开始，介绍几个用于构建页面的几个重要内容。
Bootstrap 需要为页面内容和栅格系统包裹一个容器，这样使用的CSS类才能发挥正常作用。
.container 用于固定宽度并支持响应式布局的容器。
.container-fluid:用于 100% 宽度，占据全部视口（viewport）的容器。与 .container 不能嵌套使用。
<div class="container"> ... </div>
12列栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。Bootstrap 采用的是12列的栅格系统。也就是把屏幕中任意一行均匀分成12等份。假如我们有3幅图片，我们希望这些图片横向均匀分布，只需要让每幅图片都占据4个格子便可以了。
12列栅格
在 Bootstrap v3 中使用 col-md-* 来表示所占的列数
在介绍之前，先来看一段示例，该示例用于将三张 300x300 的图片横向均匀分布。
<div class="container"> <div class="row"> <div class="col-md-4"><img src="http://placehold.it/300x300" /></div> <div class="col-md-4"><img src="http://placehold.it/300x300" /></div> <div class="col-md-4"><img src="http://placehold.it/300x300" /></div> </div> </div>
实现的效果如下：
上面的代码，主要就2个类：row 和 col-md-4。一个用于控制行，另一个用于控制列。其中定义列的类除了 col-md-* 外，还有 col-xs-*、col-sm-*、col-lg-*，而英文字母 xs、sm、md、lg 分别表示最小、小、中等、大这四种情况，分别对应手机、平板、桌面 和 大型桌面的情况。
有些人可能会觉得有问题，那我使用了 col-md-* 是不是意味着这个布局在其它情况下就乱糟糟了呢？
答案自然是 “否”。使用 col-md-4 对于桌面或更大的尺寸的时候，依旧会占据4格，而当遇到平板或手机的尺寸时，则会占据整行，类似堆栈的形式。
同时适应多种屏幕
上面的这种方式，显然留出了太多空白，有什么办法可以让布局即适应桌面又适应平板呢？
只需要加上对平板的布局类就可以了，如下：
class="col-md-4 col-sm-6"
这个表示，当屏幕尺寸为桌面大小时，采用 col-md-4 方案，而当屏幕大小缩小成平板大小时，就采用 col-sm-6 的方案（让横向只显示两张图片）。
嵌套新的行和列
在一个列内，允许存在嵌套的行和列。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
更多内容请参考官网