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被移除掉了。