bootstrap 網格系統學習

浪花一朵朵發表於2015-04-27
boot

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。

 

相關文章