Bootstrap 以 grid system 提供網頁畫面版面切割的功能，官方手冊上 Grid system 這個段落，將此功能定義為 a responsive, mobile first fluid grid system，這表示 grid 是符合 Responsive Web Design 的系統，而且在行動版畫面是以比例的方式 fluid 為主，如果是一個設計良好的 fluid 頁面，那麼在手機瀏覽該頁面時，就不會看到水平方向有產生 scroll bar，該說明內容也明確地提供了使用 grid 要注意的設定。

要注意的是，bootstrap 的 grid system 在 v2 與 v3 有一些不同的地方，以下我們只討論 v3 的 grid system。

fixed/fluid/elastic layout

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

fixed layout 是以固定的寬度 px 設定元件的寬度，而 fluid layout 是以總寬度的百分比例，設定元件的寬度。elastic 則是認為，要混合使用 fixed 與 fluid layout。

elastic layout 認為除了考慮螢幕寬度之外，還要考慮 resolution，低解析度的螢幕就該要配置較大尺寸的文字與圖片。

以 bootstrap grid system 來說，是使用 fluid layout 來設計頁面 layout。因為它只考慮了寬度，沒有考慮解析度。

grid system

以 Grid 的方式設計網頁，並不只有 bootstrap 才提供這樣的功能，目前在討論 Responsive Web Design 時，都已經習慣以 grid 的方式進行網頁設計，所以有很多 web framework 都支援 grid system，例如 960gs、susy與 blueprint。

當 web designer 與 programmer 都能以 grid 的方式，進行網頁設計，這樣就能對網頁 layout 能有共同的認知，而不會在 web desinger 切割的 layout 圖片在實際上放入網頁時，發生偏移無法對齊的問題。

不過同樣都是在使用 grid system，必須要注意的是，共用的 grid 規則為何，因為每個 framework 使用的 gutter 與 padding 不一樣。

頁寬共分為幾欄，bootstrap 為 12 欄
欄和欄之間的間距 gutter，bootstrap 的 column 前後的 padding 為 15 px，所以 gutter 就是 15+15 = 30 px
主要文本和邊緣的間距 grid padding

ref:
使用 grid system 來設計你的網頁
 Grid 的運用：PS外掛
 Using the 960 Grid System as a Design Framework

bootstrap grid system

grid system 是以 rows 與 columns 的組合，建立頁面的 layout。

假設每一頁可切割為 12 個 columns
row (行) 必須放在一個有 .container (fixed-width) 或是 .container-fluid (full-width，滿版，以比例方式設定欄寬) 的 div 中
類似 col-xs-6 的 css class，用來定義 column寬度，並放在 row 裡面，網頁內容放在 column 裡面
grid columns 總共有 12 個，可以指定 3個 .col-xs-4 用來填滿 12 個 columns
如果一個 .row 有超過 12個 columns，則超過的部份就會自動折行

Grid Options

--	Extra Small devices (Phones) (<768px)	SMall devices (Tablets) (>=768px)	Medium devices (Desktops) (>= 992px)	LarGe devices (Desktops) (>=1200px)
Grid Behavior	永遠都是 horizontal	一開始是收合的，如果超過寬度的設定值，就會顯示出來	同左	同左
Container width	none(auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12	同左	同左	同左
Column width	auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)	同左	同左	同左
Nestable	Yes	同左	同左	同左
Offset	Yes	同左	同左	同左
Column ordering	Yes	同左	同左	同左

Nestable 就是在 row, column 裡面，可再加入一層 rows, columns，就像是在一個 table 的 column 裡面再放進一個 table
Offset 就是位移，當設定了 .col-md-offset-4 ，這個區塊就會向右位移 4 格 columns，兩個 columns 中間多了一塊空白區域
Column ordering 就是可以改變 column 的前後順序，當設定了 .col-md-push-3 ，則會在 .col-md 有作用時，將該區塊往右邊 push 3 格

grid system 的範例

有關 grid system 的範例可查閱這兩個網址
bootstrap grid
bootstrap grid examples

接下來，列出一些簡短的範例紀錄使用方法

當 md 有作用時，分為 8:4 兩塊

<div class="container">
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

同時支援 Mobile, Desktop 的樣式，Mobile 時為 12:6，Desktop 時為 8:4

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

同時支援 Mobile, Tablet, Desktop 的樣式，Mobile 時為 12:6，也就是兩行，Tablet 時為 6:6，Desktop 時為 8:4

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

同時支援 Mobile, Tablet 的樣式，Mobile 時為 6:6，因為加上了 clearfix 與 visible-xs-block，所以 xs 的部份重設了，就不會折行，Tablet 時為 4:4:4

<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

支援 Tablet，第二區塊，會往右位移 4 格

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

Nesting columns，把 row 放入 col 裡面

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Column Ordering: 利用 .col-md-push- 與 .col-md-pull- 改變區塊的順序，第一塊大小為 9，往右 push 3 格，第二塊大小為 3 ，往左 pull 9 格

<div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Responsive utilities: visible hidden

Responsive utilities 為了快速建立 mobile-friendly 的網頁，div 元件還可以根據 device 的狀態，來決定要顯示或是隱藏。

css class	devices
.visible-xs-*	Extra small (less than 768px) visible
.visible-sm-*	Small (up to 768 px) visible
.visible-md-*	Medium (768 px to 991 px) visible
.visible-lg-*	Larger (992 px and above) visible
.hidden-xs	Extra small (less than 768px) hidden
.hidden-sm	Small (up to 768 px) hidden
.hidden-md	Medium (768 px to 991 px) hidden
.hidden-lg	Larger (992 px and above) hidden
.visible-print-*	Visible when print
.hidden-print	Visible only to browser not to print

所有 .visible-device- 後面都可以加上 css 的 display property value: inline, block, inline-block，換句話說，.visible-xs-* 的設定就可以是 .visible-xs-inline 或是 .visible-xs-block 或是 .visible-xs-inline-block