参考视频：https://www.imooc.com/video/3344 （建议有基础的2.0X速看）
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
※注：Bootstrap中的插件依赖于jq，因此Jq要在bs之前引入。
基本模板
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="css/bootstrap.min.css" rel="stylesheet"> 12 13 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 14 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 15 <!--[if lt IE 9]> 16 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 17 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <h1>你好，世界！</h1> 22 23 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 24 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 25 <!-- Include all compiled plugins (below), or include individual files as needed --> 26 <script src="js/bootstrap.min.js"></script> 27 </body> 28 </html>
代码解释：
（1）<meta http-equiv="X-UA-Compatible" content="IE=edge"> //在IE运行最新的渲染模式
（2）<meta name="viewport" content="width=device-width, initial-scale=1"> //初始化移动浏览显示
①平时使用的浏览器是将页面放在一个虚拟的视口也就是viewport中，通常这个虚拟的视口比屏幕宽，如此便不用把网页拥挤到一个很小的视口中；不过，同时也破坏了没有针对移动浏览器优化的网页布局。用户可通过平移和缩放的形式来查看网页不同的部分，viewport可令开发者控制其大小和缩放。
② width=device-width 令宽度等于设备的宽度
③initial-scale=1 设置初始缩放的比例，也就是页面第一次载入时缩放的比例，‘1’为不缩放
含义：让视口的宽度等于物理设备上真实的分辨率（适配移动浏览器时须加上），不缩放。
更多关于参考：http://www.cnblogs.com/2050/p/3877280.html （移动开发关于viewport的深入理解）
（3）<link href="css/bootstrap.min.css" rel="stylesheet"> //载入Bootstrap的CSS样式
MARK~
（4）
1 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 2 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 3 <!--[if lt IE 9]> 4 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 5 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 6 <![endif]-->
因为BS3.0+的框架不支持IE7，所以当IE版本低于IE9时，引入两个js文件：
①让IE浏览器支持HTML5标签；②让IE8对媒体查询（也就是media query）进行支持
（5）
1 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 2 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 3 <!-- Include all compiled plugins (below), or include individual files as needed --> 4 <script src="js/bootstrap.min.js"></script>
加入JQ和BS的插件支持文件
※注：将JS文件放到body的最下面
知识小点：
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
"指定用户是否可以缩放视区，即缩放Web页面的视图。"是user-scalable指令 ,值为yes时允许用户进行缩放，值为no时不允许缩放。
Bootstrap中的CSS
实例组件部分：
MARK~~~~~~