bootstrap 網格系統學習

Bootstrap 官方文檔中有關網格系統的描述：

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。

讓咱們來理解一下上面的語句。Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（好比移動設備、平板電腦）開始，而後擴展到大屏幕設備（好比筆記本電腦、臺式電腦）上的組件和網格。

從上面的描述上能夠知道：

1，網格系統是把屏幕定義爲12列，根據屏幕百分比動態調整大小。

2，屏幕定義分爲4種類型：

 

/* 超小設備（手機，小於 768px） */ /* Bootstrap 中默認狀況下沒有媒體查詢 */ /* 小型設備（平板電腦，768px 起） */ @media (min-width: @screen-sm-min) { ... } /* 中型設備（臺式電腦，992px 起） */ @media (min-width: @screen-md-min) { ... } /* 大型設備（大臺式電腦，1200px 起） */ @media (min-width: @screen-lg-min) { ... }

3，全部的網絡佈局必須定義在

container類和row類裏面。


看下面的網絡系統結構：

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

 

注意：
1，row類裏面的列數之和必須小於或等於12，小於12時，從左到右依次排列。不足12列時，補空。第一行是3列和5列。右邊空出4列。
第二行是滿屏顯示。


2，超過12列時，從要超過的下一列開始，換行往下排。

    <div class="row">
        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>

        <div class="col-md-7" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>

        <div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
            </p>
        </div>
    </div>

3，列嵌套 請在列裏使用row類。而後再在嵌套的列裏知足12列時，和網絡系統同樣。

4，列偏移，列偏移是向左外邊距 margin增長配置的列數。

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs=* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。

爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1到 11。

在下面的實例中，咱們有 <div class="col-md-6">..</div>，咱們將使用 .col-md-offset-3 class 來居中這個 div。