Bootstrap 3学习笔记
Mobile first（移动平台优先）
Bootstrap 3主要优化了移动平台的显示。从示例代码中可见如下行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
手机浏览器把页面放在一个虚拟窗口中（virtual window，也称viewport），通常这个viewport比屏幕宽，这样就不用把网页挤入到一个狭窄的窗口（屏幕）中。用户通过平移（pan）、 缩放（zoom）来查看网页的不同部分。移动版的Safari浏览器首先引入了viewport这个meta tag（参考Using the Viewport Meta Tag）。viewport标签的content部分的可选值为：
| 字段 | 说明 |
|---|---|
| width | viewport的宽度。特别地，device-width指设备屏幕宽度。 |
| height | viewport的高度。 |
| initial-scale | 初始（load时）缩放比例。 |
| maximum-scale | 运行缩放的最大比例。 |
| minimum-scale | 运行缩放的最小比例。 |
| user-scalable | 是否运行用户手动缩放。禁止缩放：user-scalable=no |
HTML5 for old IE
为让IE9之前的IE浏览器支持HTML5，引入了html5shiv.js这个文件：
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
Normalize.css
手册里提到使用了Normalize.css（by Nicolas Gallagher, Jonathan Neal）这个CSS文件。Normalize.css的目的是让HTML元素在不同浏览器里的展现形式一致。他的竞争对手是YUI CSS RESET，区别是Normalize.css只对会产生浏览器兼容性问题的HTML元素样式进行调整，并不重置所有的CSS样式；而YUI CSS RESET则重置所有HTML样式，以追求更强的一致性。
Grid System
Grid System依然是重头戏。BS3将屏幕分为4类：
| 分类 | 说明 |
|---|---|
| - | 默认的较小移动设备（phones），最多480px。 |
| screen-sm | 平板（tablets），768px及以上。 |
| screen-md | 桌面电脑（desktops），992px及以上。 |
| screen-lg | 较大的桌面电脑（desktops），1200px及以上。 |
例如以下这个代码片段：
h1 { font-size:40px; }
在桌面电脑上显示h1为40px，但在手机上显示为40px则很大了，因此在一个移动优先的CSS中它会变成（默认是22px，移动平台上的显示效果）：
h1 {
font-size: 22px;
@media min-width(@scree-tablet) {
font-size: 40px;
}
}
下表更细节地给出了Grid System的数值参数：
| - | 极小设备 <768px; | 小设备 >=786px; | 中等设备 >=992px; | 大设备 >=1200px; |
|---|---|---|---|---|
| 类 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Grid行为 | 总是水平排列 Horizontal at all times |
起初是堆叠在一起，在分界点（breakpoints）时会被水平放置 Collapsed to start, horizontal above breakpoints |
||
| 列数 | 12列 | |||
| 最大列宽 | 自动 | 60px | 78px | 95px |
| 列间隙宽度 | 30px（左右两边间隙都为15px） | |||
上表中以"Grid行为"一行最为费解。例如以下代码：
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
则表示无论何种情况下，总是分为左右两列布局，各占50%的行宽。
如果是以下代码：
<div class="col-sm-6">left</div>
<div class="col-sm-6">right</div>
则表示如果屏幕宽度达到small一级（786px）就水平显示，各占50%行宽，否则（在更小的屏幕上）就堆叠在一起显示（堆栈式）。
混合列显示：
<div class="col-sm-3 col-md-6 col-lg-4">left</div>
<div class="col-sm-9 col-md-6 col-lg-8">right</div>
则表示在小屏幕（786px）上以3/9的比例显示左右两列；在中等屏幕上（992px）以6/6的比例显示；在大屏幕上以4/8的比例显示。
升级到Bootstrap 3
实践笔记
升级到Bootstrap 3的准备工作
为了快速实践Bootstrap 3，首先在git中新建一个分支：
$ git branch bs3
$ git checkout bs3
然后直接使用Bootstrap 3的CDN节点：
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js"></script>
经此一改，所有页面布局大乱，接下来就是修改所有相关的HTML文件。
修改HTML文件
页面布局。所有老式的spanX都将被替换为col-md-X：
$ find *.html | xargs sed -i -e 's/span\([0-9]\)/col-md-\1/g'
这步后页面基本可看了。
导航栏。导航栏的写法和以前也不太一样，按手册上的修改下，基本回复正常。
按钮（Button）。以前使用btn默认风格需要修改为btn-default：
<button class="btn btn-default">
新的button尺寸变成了： .btn-lg、 .btn-sm、 .btn-xs
将 .btn-mini（旧）替换为 .btn-sm（新）。
图标（Glyphicons）。目前Glyphicons已经从Bootstrap中独立出来了，因此这部分改动相对较大。首先从Github下载Glyphicons包，解压，把css文件和fonts目录复制到网站目录中：
$ wget https://github.com/twbs/bootstrap-glyphicons/archive/gh-pages.zip
$ unzip bootstrap-glyphicons-gh-pages.zip
$ cp bootstrap-glyphicons-gh-pages/css/bootstrap-glyphicons.css htdocs/vendor/bootstrap/css/
$ mkdir -p htdocs/vendor/bootstrap/fonts
$ cp bootstrap-glyphicons-gh-pages/fonts/glyphiconshalflings-regular.* htdocs/vendor/bootstrap/fonts/
在HTML的头部引入css文件：
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap-glyphicons.css" />
修改旧式的代码：
<!-- old style -->
<i class="icon-shopping-cart"></i>
<!-- new style -->
<span class="glyphicon glyphicon-shopping-cart"></span>
试验成功后就可以用sed执行批量替换了：
$ find *.html | xargs sed -i -e 's/<i class="icon-\([^"]*\)"><\/i>/<span class="glyphicon glyphicon-\1"><\/span>/g'
label。label-important被移除掉了。
