Bootstrap v3.2.0 Grid 系統(Part 1)

Bootstrap 是透過網格(Grid)系統將網頁的版面切割為不同的列(Row)與行(Column). 首先我們會把網頁畫面由上向下分為不同的列， 然後再把每ㄧ列再由左至右分為不同的行. 網頁的內容就放置在列的行中. 在結構上來說，行是列的子元素， 也只有行可作為列的子元素. 每ㄧ列最多可有12行. 設計人可以把數行合為一體，以在列中組織成不同寬窄的格子.

在設計版面的網格系統時， Bootstrap是使CSS去定義網格系統中的元素，而且為了支援各種尺寸的裝置， CSS  class針對不同尺寸的裝置以不同的字首(prefix)開始.

裝置	CSS prefix	最大容器寬
極小尺寸裝置 手機(< 768px)	.col-xs-	自動
小尺寸裝置 平板電腦(>= 768px)	.col-sm-	750px
中型尺寸裝置 桌機, 筆電(>= 992px)	.col-md-	970px
大型尺寸裝置 桌機(>= 1200px)	.col-lg-	1170px

現以Bootstrap v3.2.0而言， 其網格系統使用方法如下：

• 列必須放在具有.container(固定寬度)或.container-fluid(全部寬度)CSS class的容器中
• 列配置CSS class .row
• 行配置CSS class .col-xx-y 其中 xx 依你所考慮裝置而定, y 為你所採用行數. 
• 列中的行可配置多組行CSS class以設定行在

範例
<div class="container-fluid">
     <div class="row">
          <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:lavender;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua.
               </p>
   
         </div>
        <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:lavenderblush;">
            <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                   ut aliquip ex ea commodo consequat.
            </p>
        </div>
     </div>
</div>

在本範例中，容器寬度佔全版寬度100%, 並把版面分為ㄧ列兩行. 左側的行與右側的行在小尺寸裝置中寬度比為1：3 (因CSS class 為col-sm-3與col-sm-9, 寬度比為3:9). 在中型尺寸裝置則寬度比為1:1(因CSS class 為col-md-6與col-md-6, 寬度比為6:6). 在大型尺寸裝置則寬度比為1:2(因CSS class 為col-lg-4與col-lg-8, 寬度比為4:8).

如在極小尺寸裝置則因沒有CSS class .col-cs- 則畫面中該兩行則每一個均會改佔用在極小尺寸裝置的全部寬度而兩個部份將改採由上向下疊放(Stacked)排列.

在Part 2將為各位示範Bootstrap 網格系統的應用