全局樣式
1.要求html5文檔類型
Bootstrap使用的css屬性和html元素依賴於html5的文檔類型聲明，請確保每個Bootstrap的頁面包含下面的代碼：
2.排版和鏈接樣式
全局的排版和鏈接樣式放在scaffolding.less文件內（關於less教程後面會有詳細說明）。默認做了如下處理：
- 移除body的外邊距
- 設置body的背景顏色爲白色
background-color: white; - 使用
@baseFone，@baseFontSize，@baseLineHeight屬性作爲排版基礎 - 使用
@linkColor設置了全局鏈接顏色和:hover僞屬性的下劃線
3.默認樣式重置
從 Bootstrap 2開始，CSS重置樣式基於Normalize.css，新的重置樣式，可以在reset.less中找到（Bootstrap做了許多的簡化）。
默認柵格佈局系統
Bootstrap的默認佈局系統由總寬度爲940px的12列組成。
它能夠適應各個分辨率的顯示設備，比如手機、平板、超高分辨率屏幕等。
（ps：請看demo）
<div
class="row"> <div
class="span4">...</div> <div
class="span8">...</div></div> |
上面的代碼將創建二列柵格，span4容器佔總寬度的4/12即（1/3）。
1.如何處理列的偏移
比如我們希望有個柵格是右靠齊。
<div
class="row"> <div
class="span4">...</div> <div
class="span4
offset4">...</div></div> |
第二個span4容器，增加個offset4樣式名，表示跟前一個容器相隔4個列距離。
2.處理列的嵌套
（ps：請看demo）
在Bootstrap中使用靜態（非浮動）的佈局處理柵格的嵌套是非常簡單的事。
<div
class="row"> <div
class="span12"> Level
1 of column <div
class="row"> <div
class="span6">Level
2</div> <div
class="span6">Level
2</div> </div> </div></div> |
.row的容器內部是一個佔滿12列的層(.span12)，下面嵌套個新的.row容器，內部是span6二列布局。
浮動佈局系統
浮動佈局系統，就是我們經常使用的float:left;佈局方式，比較特殊的是bootstrap使用百分比來定義柵格的寬度。
1.浮動柵格的行容器
（ps：請看demo）
<div
class="row-fluid"> <div
class="span4">...</div> <div
class="span8">...</div></div> |
流動佈局，行容器使用. row-fluid 樣式名，其他地方不變。
.row-fluid
{ width:
100%;}.row-fluid:before,
.row-fluid:after { content:
""; display:
table;}.row-fluid:after
{ clear:
both;} |
2.寬度使用百分比，而不是像素值
浮動佈局系統比靜態佈局系統，擁有更強的適應性，同樣適應不同分辨率的屏幕。
.row-fluid
> [class*="span"]
{ float:
left; margin-left:
2.5641%;}.row-fluid
> [class*="span"]:first-child
{ margin-left:
0;}
|
3.浮動佈局中處理容器的嵌套
（ps：請看demo）
浮動佈局中的嵌套處理有點不大一樣:嵌套的柵格不需要匹配父容器的柵格數，每一行的寬度都佔用父容器的100%寬度。
<div
class="row-fluid"> <div
class="span12"> Level
1 of column <div
class="row-fluid"> <div
class="span6">Level
2</div> <div
class="span6">Level
2</div> </div> </div></div> |
定製柵格
|
變量 |
默認值 |
描述 |
|
@gridColumns |
12 | 列的數量 |
|
@gridColumnWidth |
60px | 列的寬度 |
|
@gridGutterWidth |
20px | 列的間隔 |
LESS中的變量
Bootstrap中定製一套自己的940px柵格系統，只需要很少的less變量。這些變量可以在variables.less中找到。
如何定製
你需要修改@grid*三個變量（指的是上面表格中的三個變量），並重新編譯Bootstrap（less重新編譯出新的css文件）。關於less的編譯可以看 four ways documented to recompile，如果新增了列，務必在grid.less增加上對應的樣式。
保留適應性
自適應的柵格系統只能用於默認的940px柵格。爲了維持Bootstrap的自適應性，需要額外在 responsive.less中自定義柵格樣式。
佈局
靜態佈局
<div
class="container"> ... </div> |
浮動佈局
使用container-fluid樣式名，產生浮動頁面結構，下面的demo中演示了生成常用的2列布局。
<div
class="container-fluid"> <div
class="row-fluid"> <div
class="span2"> <!--Sidebar
content--> </div> <div
class="span10"> <!--Body
content--> </div> </div></div> |
效果如下圖：
自適應設計
如何讓柵格佈局系統適應不同分辨率的屏幕？
需要用到css3的media queries，嚴重推薦閱讀《CSS3 media queries使用參考指南》和《CSS3
Media Queries 詳解》。Media Queries的引用，讓你可以針對不同的設備定製不一樣的css樣式，可以很方便的讓佈局系統適應不同的媒體設備。
原文講得比較晦澀，明河借用《CSS3 Media Queries 詳解》舉個簡單例子：
<link
rel="stylesheet"
type="text/css"
href="swordair.css"
media="screen
and (min-width: 400px)"> |
樣式表引用增加media屬性。
- screen： 媒體類型裏的一種，10種媒體類型
- and 被稱爲關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)
- (min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看 相關的Media features部分
screen and (min-width: 400px)的意思是當屏幕的寬度大於等於400px的時候，應用此條CSS，也就是說media非常像條件語句。
bootstrap支持的設備
|
Label |
Layout width |
Column width |
Gutter width |
| 智能手機 | 等於小於480px | 無固定寬度 | 無固定寬度 |
| 介於智能手機和平板電腦之間 | 等於小於767px | 無固定寬度 | 無固定寬度 |
| 平板電腦 | 等於大於768px | 42px | 20px |
| 默認 | 等於大於980px | 60px | 20px |
| 超分辨率 | 等於大於1200px | 70px | 30px |
需要meta標籤
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"> |
使用media queries
Bootstrap默認不包含這些media queries的樣式，你可以通過下列的方式引入：
- 頁面引入bootstrap-responsive.css
- 重編譯bootstrap時，增加@import “responsive.less”
- 修改和單獨編譯responsive.less爲一個獨立的文件
Bootstrap 的media queries代碼
//
Landscape phones and down @media
(max-width:
480px)
{ ... } //
Landscape phone to portrait
tablet @media
(max-width:
767px)
{ ... } //
Portrait tablet to landscape
and desktop @media
(min-width:
768px)
and (max-width:
979px)
{ ... } //
Large desktop @media
(min-width:
1200px)
{ ... } |
