首页 » 升级到Bootstrap 3

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部分的可选值为:

字段说明
widthviewport的宽度。特别地,device-width指设备屏幕宽度。
heightviewport的高度。
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'

labellabel-important被移除掉了。

分享

0