Bootstrap 框架
认识和引入Bootstrap， 栅格系统，响应式布局
1. Bootstrap 是 Twitter 公司于2011年8月开源的整体式前端框架
源代码由LESS预编译
官网： http://getbootstrap.com
汉化文档：http://bootcss.com
2. 优点
功能强大，样式美观
简单易用，文档丰富
高度可定制性
丰富的生态圈
3. 版本
版本2 立体样式 基于PC端网页，默认不支持响应式，需额外引入，较灵活
版本3 扁平样式 默认自带响应式，不提供非响应式固定布局。
4. 引入：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css"> // 引入
</head>
<body>
.....
<script src="jQuery.js"></script> //放在前面
<script src="bootstrap.js"></script>
</body>
</html>
bootstrap的javascript动态效果是基于jQuery。
引入bootstrap可使用第三方百度CDN服务：
Bootstrap2 : http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs;
Bootstrap3 : http://open.bootcss.com/;
如是国外项目首选Google的CDN服务
5. Bootstrap的栅格系统
5.1 基础
Bootstrap2 默认不带响应式固定布局的12列栅格系统，栅格宽度60像素，分隔宽度20像素，总宽度940像素（不计算最左侧的分隔宽度）。
<div class="container"> 居中容器
<div class="row"> //使用栅格系统需class="row"元素 包裹
<div class="span3">左边内容</div>
<div class="span9">右边内容</div>
</div>
</div>
Bootstrap3 不再提供非响应式的固定布局，如需禁用响应式布局，如下：
不要添加 viewport<meta>
通过.container 设置一个width值从而覆盖框架的默认width设置，如 width ：970px !important;
如果使用了导航条，需要移除所有导航条的折叠和展开行为
对于栅格布局，额外增加.col-xs-* class 或替换掉 .col-md-* 和 .col-lg-* 。针对超小屏幕设备的
栅格系统能够在所有分辨率的环境下展开。
5.2 设置偏移量
类似margin-left的偏移操作用offset类的固定值代替，
如：<div class="span3 offset3">..</div>
5.3 流式布局的栅格系统
将最外层的.row 替换为 .row-fluid类
如：<div class="row-fluid"></div>
6. Bootstrap3 的响应式布局案例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
</head>
<body style="margin:20px">
<div class="container">
<h1 class="text-hide">Custom heading</h1>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-5 col-lg-4">
<h1>体育新闻</h1>
<h1>娱乐新闻</h1>
<h1>经济新闻</h1>
</div>
<div class="col-xs-12 col-sm-9 col-md-7 col-lg-8">
<h2>百度拟用全景技术还原尼泊尔古迹</h2>
<p class="lead">4月29日，百度宣布即日起发起一项照片征集活动，将借助该公司创新的“全景照片 游”技术，在网上虚拟还原出此前尼泊尔地震中被毁古迹的原貌。</p>
<p>在4月25日尼泊尔突发的里氏8.1级地震中，位于加德满都等地的多处世界文化遗产古建筑群遭到 了严重损毁，包括1832年受女王之命修建的九层达拉哈拉塔，外观酷似海螺的寺庙建筑巴德岗杜巴广 场，以及世界最大的圆佛塔博达哈大佛塔等......</p>
</div>
</div>
</div>
</body>
在窗口大于1200px（col-lg-4）时，左侧边栏占据4列宽，右侧占据8列宽
992px---1200px（col-md-5）时，左侧边栏占据5列宽，右侧占据7列宽
768px---992px（col-sm-3） 时， 左侧边栏占据3列宽，右侧占据9列宽
小于768px时（col-xs-12）， 左右都占据100%，堆叠
