柵格系統簡介
#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入門教學》
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>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>说明：可以看到，在第一个列(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>说明：默认情况下，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柵格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
