BootStrap學習之柵格佈局

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的改變，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin用於生成更具語義的佈局。

簡介

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。Bootstrap 柵格系統的工做原理以下：

•  「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
•  經過「行（row）」在水平方向建立一組「列（column）」。你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
•  相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
•  經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。
•  若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。

柵格參數

經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

從堆疊到水平排列

　　使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。

<div class="row">
    <div class="col-md-1" style="background-color: #8a6d3b">.col-md-1</div>
    <div class="col-md-1" style="background-color: #4cae4c ">.col-md-1</div>
    <div class="col-md-1" style="background-color: #623565">.col-md-1</div>
    <div class="col-md-1" style="background-color: #1b6d85">.col-md-1</div>
    <div class="col-md-1" style="background-color: #2b542c">.col-md-1</div>
    <div class="col-md-1" style="background-color: #623565">.col-md-1</div>
    <div class="col-md-1" style="background-color: #4cae4c">.col-md-1</div>
    <div class="col-md-1" style="background-color: #8a6d3b">.col-md-1</div>
    <div class="col-md-1" style="background-color: #761c19">.col-md-1</div>
    <div class="col-md-1" style="background-color: #1b6d85">.col-md-1</div>
    <div class="col-md-1" style="background-color: #843534">.col-md-1</div>
    <div class="col-md-1" style="background-color: #d58512">.col-md-1</div>
</div>

多餘的列（column）將另起一行排列

　　若是在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將做爲一個總體單元被另起一行排列。

<div class="row">
    <div class="col-md-8" style="background-color: #d58512">.col-md-8</div>
    <div class="col-md-4" style="background-color: #4cae4c">.col-md-4</div>
</div>

 

.row 內包含的列（column）大於12個

<div class="row">  
    <div class="col-md-9" style="background-color: #d58512">.col-md-9</div>
    <div class="col-md-7" style="background-color: #4cae4c">.col-md-7</div>
</div>

 

列偏移

       使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
    <div class="col-md-4" style="background-color: #8a6d3b">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4" style="background-color: #2e6da4">
        .col-md-4 .col-md-offset-4
    </div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3" style="background-color: #3c763d">
        .col-md-3 .col-md-offset-3
    </div>
    <div class="col-md-3 col-md-offset-3" style="background-color: #5bc0de">
        .col-md-3 .col-md-offset-3
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3" style="background-color: #761c19">
        .col-md-6 .col-md-offset-3
    </div>
</div>

嵌套列

爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

<div class="row">
    <div class="col-sm-8 col-md-8" style="background-color: #d9534f">
        Level 1: .col-sm-9 .col-md-9
        <div class="row">
            <div class="col-xs-7 col-sm-6" style="background-color: #8a6d3b">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-5 col-sm-6" style="background-color: #67b168">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
        Level 2: .col-sm-9 .col-md-9
    </div>
    <div class="col-sm-4 col-md-4" style="background-color: #5bc0de">
        Level 1: .col-sm-9 .col-md-3
        <div class="row">
            <div class="col-xs-7 col-sm-6" style="background-color: #8a6d3b">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-5 col-sm-6" style="background-color: #623565">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
        Level 1: .col-sm-9 .col-md-3
    </div>
</div>

列排序

經過使用 .col-md-push-*  和 .col-md-pull-*  類能夠很容易的改變列（column）的順序，即將兩個相關板塊的先後或者左右順序調換。

<div class="row">
    <div class="col-md-6 col-md-push-3" style="background-color: #4cae4c">
        .col-md-6 .col-md-push-3
    </div>
    <div class="col-md-3 col-md-pull-6" style="background-color: #8a6d3b">
        .col-md-3 .col-md-pull-6
    </div>
    <div class="col-md-3" style="background-color: #8a6d3b">
        .col-md-3
    </div>
</div>

 

　　我的感受這個實際上沒什麼用，就是經過col-md-push-3和col-md-pull-9來使得兩個相關div改變原來的DOM位置，將兩個div在DOM上的位置調換。可是col-md-push-3必須和col-md-3所佔列數相等；一樣col-md-pull-6也必須和col-md-6所佔列數相等。 實際開發過程當中估計不多會用到這兩個類，沒有多少實際做用。