柵格系統布局

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

這是Bootstrap中文文檔中提供的柵格系統的定義，大概是什么意思呢，響應式大概是什么意思呢，就是說自動根據屏幕顯示窗口的大小來進行布局。

將“行”的class設為“row”，一行分為12列，來進行布局。前提是都要包含在“container”這個容器中進行設置。

我們可以來寫一段代碼；

<div class="container">
  <div class="row">
     <div class="clo-md-6">123</div>
     <div class="clo-md-6">456</div>
  </div> 
</div>

這時一行被分為了兩個相等寬度的部分，每個部分占6個格。

來看一個列偏移，實際上就是設置空白的格子的數量，實現目標格子偏移

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

row中第一個div和第二個div左側分別空白了三個格子，class值設置為“col-md-offset-3”

 

媒體查詢，可以理解為可以指定在特定的分辨率下，執行的CSS樣式

這里補充一個知識點，看一段代碼

<div class="row">
  <div class="col-xs-6 ">123</div>
  <div class="col-xs-6 ">456</div>
</div>

這里使用了超小分辨率的類前綴，那么在正常超大分辨率下，顯示的結果也是均分row的寬度，反之，如果使用md前綴，在超小分辨率下則會換行。