網格系統佈局基本用法

網格系統用來佈局，其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。因爲Bootstrap框架在不一樣屏幕尺寸使用了不一樣的網格樣式，在這一節中所涉及到的示例，咱們都以中屏（970px）爲例進行介紹，其餘屏幕的使用也相似這一種。關於屏幕尺寸以下圖：

一、列組合

列組合簡單理解就是更改數字來合併列（原則：列總和數不能超12），有點相似於表格的colspan屬性，例如：

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

使用上面的結構，你將看到下圖的效果：

(在右側結果窗口中查看時須要設置爲全屏)

實現列組合方式很是簡單，只涉及兩個CSS兩個特性：浮動與寬度百分比。在bootstrap.css文件的第1088行～1126行：

/*確保全部列左浮動*/

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, 
.col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
 }

/*定義每一個列組合的寬度（使用的百分比）*/

  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }