Bootstrap 柵格系統佈局 .col-lg- .col-md- .col-sm- .col-xs-

Bootstrap響應式佈局是利用其柵格系統，對於不同的螢幕採用不同的類屬性。在開發中可以只寫一套程式碼在手機平板，PC端都能使用，而不用考慮使用媒體查詢（針對不同的裝置分別寫不同的程式碼）。Bootstrap的官方解釋：Bootstrap提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為做多12列。 
  柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局。

柵格系統的工作原理：

1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便為其賦予合適的排列（aligment 
）和內補（padding）。 
2.通過行（row）在水平方向建立一組列（column）。 
3.自己內容應當放置於列（column）內，並且，只有列可以作為行（row）的直接子元素。 
4.類似.row和.col-xs-4這種預定義的類，可以用來快速建立柵格佈局。Bootstrap原始碼中定義的mixin也可以用來建立語義化佈局。 
5.通過為列設定padding屬性，從而建立列與列之間的間隔（gutter）。通過為.row元素設定負值margin從而抵消為.container元素設定的padding，也就間接為行（row）所包含的列（column）抵消掉了padding。 
6.柵格系統的列是通過指定1到12的值來表示其跨越範圍。例如三個等寬的列可以使用三個.col-xs-4來建立。 
7.如果一行（row）中包含了的列（column）大於12，多餘的列所在的元素將作為一個整體另起一行排列。 
8.柵格類適用於與螢幕寬度大於或等於分界點大小的裝置，並且針對小螢幕覆蓋柵格類。 
如下圖所示為柵格系統在多種螢幕上的應用說明。 

媒體查詢

/* 超小裝置（手機，小於 768px） */
/* Bootstrap 中預設情況下沒有媒體查詢 */

/* 小型裝置（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型裝置（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型裝置（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

基本的網格結構

下面是 Bootstrap 網格的基本結構：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

使用Bootstrap響應式佈局

  首先需要在head中引入meta標籤，新增viewpirt屬性，content中寬度等於裝置寬度， initial-scale:頁面首次被顯示可見區域的縮放級別，取值1則頁面按實際尺寸顯示，無任何縮放； 
maximum-scale:允許使用者縮放到的最小比例； 

user-scalable:使用者是否可以手動縮放。

程式碼如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" >