4-1
BootStrap的版面布局
一、 BootStrap的版面布局（網格）
- Bootstrap 是建立在12欄網格、佈局和元件之上。
- Bootstrap 須使用HTML5 doctype，所有網頁開頭都要有<!DOCTYPE html>
二、 BootStrap的固定版面布局 container＋row
- 固定布局，可先用<div class="container"></div>做出一個寬度約螢幕畫面90%並置中的網頁容器。
- 接著，用<div class="row"></div>畫出一個橫向區域（一行），再用<div class="span數"></div>將一行分成數欄。
- 可巢狀，即<div class="span數"></div>中可以有<div class="row"></div>，但其子row裡面的span數總和，不得大於父span數。
- 沒有嚮應式。可視視窗在低於767px 寬度下，列會變成流動且垂直堆疊。
<div class="container">
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</div>
三、 BootStrap的流動版面布局container-fluid＋row-fluid
- 流動布局，可先用<div class="container-fluid"></div>做出滿版的網頁容器。
- 接著，用<div class="row-fluid"></div>畫出一個橫向區域（一行），再用<div class="span數"></div>將一行分成數欄（總和12欄）。
- 可巢狀，即<div class="span數"></div>中可以有<div class="row-fluid"> </div>，其子row-fluid裡面又是12欄，和固定的row不同。
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</div>
四、 利用offset可以跳過幾個欄位：
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
4. BootStrap入門
