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