bootstrap為什麼12柵格-Bootstrap教程-PHP中文網

柵格系統簡介

#Bootstrap 提供了一套響應式、行動裝置優先的串流柵格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。

柵格系統透過一系列行（row）與列（column）的組合來建立頁面的佈局，設定的內容可以放在建立好的佈局中。

柵格系統的實作原理

柵格系統的實作原理非常簡單，只是透過定義容器的大小，平分為12份，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式的柵格系統。

柵格系統的主要工作原理：

#➣ 一行資料（row）必須包含在.container （固定寬度）或.container -fluid （100% 寬度）中，以便為其賦予適當的對齊方式和內邊距（padding）。

➣ 透過 “行（row）” 在水平方向建立一組 “列（column）”。

➣ 你的具體內容應放置於「列（column）」內，而且只有「列（column）」可以作為行（row）」的直接子元素。

#➣ 內建一大堆樣式，可以使用如.row 和.col-xs-4（佔四列寬度）這樣的樣式（即預先定義的類別），來快速建立柵格佈局。Bootstrap 原始碼中定義的mixin 也可以用來建立語義化的佈局。

➣ 透過為「列（column）」設定padding 屬性，從而建立列與列之間的間隔（gutter）。透過為.row 元素設定負值margin 從而抵消掉為.container 元素設定的padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。

➣ 柵格系統中的列是透過指定1 到12 的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個.col-xs-4 來建立。

#➣ 如果一「行（row）」中包含的「列（column）」大於12，多餘的「列（column）」所在的元素將會被當作一個整體另起一行排列。

➣ 柵格類別適用於與螢幕寬度大於或等於分界點大小的設備，並且針對小螢幕設備覆蓋柵格類別。因此，在元素上應用任何.col-md-* 柵格類別適用於與螢幕寬度大於或等於分界點大小的設備，並且針對小螢幕設備覆蓋柵格類別。因此，在元素上應用任何.col-lg-* 不存在，也影響大螢幕設備。

柵格系統佈局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個.container 容器。我們提供了兩個作此用處的類別。注意，由於padding 等屬性的原因，這兩種容器類別不能互相嵌套。

.container 類別用於固定寬度並支援響應式佈局的容器

<div class="container">
  ...
</div>

登入後複製

.container -fluid 類別用於100% 寬度，佔據全部視口（viewport）的容器

<div class="container-fluid">
  ...
</div>

登入後複製

#柵格系統的使用

柵格系統的使用，其實就是列的各種組合。在基本用法裡有四種特性，即列組合、列偏移、列嵌套和列排序。由於不同的螢幕尺寸使用不同的樣式，我們以中等螢幕（md）為例進行介紹，其他螢幕用法也是類似。

1、列組合

列組合就是透過更改數字來合併列，類似表格裡的colspan 。列組合的實作方式很簡單，只涉及兩個 CSS 特性：左浮動和百分比。

說明：在使用柵格系統的時候，只要記住每行的總格數是 12 個，根據實際項目自由組合即可。

        <div class="container">
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

登入後複製

bootstrap為什麼12柵格

相關推薦：《bootstrap入門教學》

2、欄位偏移

有時候我們不想讓兩個相鄰的列挨在一起，這時候利用柵格系統的列偏移（offset）功能來實現，而不必再定義margin 值。對於中等螢幕，可以使用 .col-md-offset-* 形式的樣式將列偏移到右側。

例如，.col-md-offset-2 的意思是將元素向右移動了兩個列的寬度。

　　　 <!--列偏移-->
　　　　<div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
　　　　</div>

登入後複製

bootstrap為什麼12柵格

3、列巢狀

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        <!--列嵌套-->
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    Level 1：col-md-8
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-6">Level 2：col-md-6</div>
                        <div class="col-md-6">Level 2：col-md-6</div>
                    </div>
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-3"> Level 3：col-md-3 </div>
                        <div class="col-md-6"> Level 3：col-md-6 </div>
                    </div>
                </div>
                <div class="col-md-4">Level 1：col-md-4</div>
            </div>
        </div>

登入後複製

bootstrap為什麼12柵格

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在 row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->
        <div class="container">
            <div class="row">
            　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        　　</div>
        </div>

登入後複製

bootstrap為什麼12柵格

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

bootstrap為什麼12柵格