我們在使用Bootstrap的時候，可以使用柵格系統(tǒng)對網頁進行布局。接下來我們就一起來學習一下柵格系統(tǒng)布局的方法。

container類

特點：

• container類（class）能創(chuàng)建一個居中的區(qū)域，然后我們能夠把其他位置的內容放到里面。
• 帶有container類的div框等價于一個具有靜態(tài)寬度并且margin值為auto的居中的div框。
• container類的優(yōu)點在于它是響應式的,它會以當前屏幕的寬度為基礎計算出最佳的寬度予以應用。
  示例：

<div class="container">
    <table width="100%">
        <tr>
            <th>考試科目：統(tǒng)一建模語言</th>
            <th>時間：100分鐘</th>
            <th>得分：</th>
        </tr>
    </table>
</div>

效果：

container類創(chuàng)建居中的區(qū)域

如果，要用CSS實現(xiàn)上面的效果，添加的代碼為：

.container{
            margin-left: 80px;
            margin-right: 80px;
        }

但是這樣添加實現(xiàn)不了響應式的布局，因為左右的邊距是給定的，如果屏幕比較小的時候就實現(xiàn)不了上述的效果。

柵格系統(tǒng)

特點：
響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。
工作原理：

• “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
• 通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
• 你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。
• 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
• 通過為“列（column）”設置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。

實例：
1.基本的柵格結構
代碼：

<div class="container">
    <div class="row" >
        <div class="col-md-4" style="border:1px solid grey">
            考試科目：統(tǒng)一建模語言
        </div>
        <div class="col-md-4" style="border:1px solid grey">
            時間：100分鐘
        </div>
        <div class="col-md-4" style="border:1px solid grey">
            得分：
        </div>
    </div>
</div>

效果：

柵格的基本用法

2.偏移列
使用 .col-md-offset-* 類實現(xiàn)偏移。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 范圍是從 1 到 11。
代碼：

<div class="container">
    <h3>歡迎進入</h3>
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <p>name:</p><input type="text"/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <p>password:</p><input type="password"/>
        </div>
    </div>
</div>

效果：

偏移列

3.嵌套列
為了在內容中嵌套默認的柵格，請?zhí)砑右粋€新的 .row，并在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數(shù)不能超過12（其實，沒有要求你必須占滿12列）
代碼：

<div class="container">
    <h3>歡迎登錄</h3>
    <div class="col-md-4" style="border:1px solid grey">
        填寫信息：
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-4">
                考試科目：統(tǒng)一建模語言
            </div>
            <div class="col-md-4">
                時間：100分鐘
            </div>
            <div class="col-md-4">
                得分：
            </div>
        </div>
        <div class="row">
                <div class="col-md-4">
                    班級：<input type="text">
                </div>
                <div class="col-md-4">
                    學號：<input type="text" >
                </div>
                <div class="col-md-4">
                    姓名：<input type="text" >
                </div>
        </div>
    </div>
</div>

效果：

嵌套列