【5】瞭解Bootstrap預置的柵格系統

在開篇之前我們來說一個class，因為以後要用到的

用.container包裹頁面上的內容即可實現置中對齊。在內都為container設定了width，用以匹配柵格系統。

這裡可能有的人不太清楚“不同的媒體查詢閾值範圍”是什嗎？這裡我說下，就是定義了一套範圍（這個範圍有幾個區間），如果你現在是用的瀏覽器寬度值（即可視地區）在這套範圍的某個區間中，那麼就使用這個區間瀏覽網頁的的解決方案。（不知道這樣說能不能讓大家懂，汗 ￣□￣｜｜）

=================================================================================================

【1】下面我們就來介紹下柵格系統吧（摘抄下官網吧）

Bootstrap內建了一套響應式、行動裝置優先的流式柵格系統，隨著螢幕裝置或視口（viewport）尺寸的增加，系統會自動分為。

1、它包含了便於使用的預定義classe（這個是我們要說的，不知道是不是中文官方筆誤，class後面怎麼多了一個e啊）；

2、還有強大的mixin用於產生更具語義的布局（這個不是我們要說的，它相當於自訂自己要的柵格布局，預設的預置classe就夠我們用了，如果你想在進一步，可以自己研究下）。

=================================================================================================

【2】柵格系統用於通過一系列的行（row）與列（column）的組合建立頁面配置，你的內容就可以放入建立好的布局中。

下面就介紹以下：

1、“行（row）”必須包含在.container中，以便為其賦予合適的排列（aligment）和內補（padding）。
2、使用“行（row）”在水平方向建立一組“列（column）”。
3、你的內容應當放置於“列（column）”內，而且，只有“列（column）”可以作為行（row）”的直接子項目。
4、通過一些預定義的柵格class（ .row and .col-xs-4 ）可以用來快速建立柵格布局。Bootstrap源碼中定義的mixin也可以用來建立語義化的布局。
5、通過設定padding從而建立“列（column）”之間的間隔（gutter）。然後通過為第一和最後一樣設定負值的margin從而抵消掉padding的影響。
6、柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個.col-xs-4來建立。

：

對於需要佔據整個瀏覽器視口（viewport）的頁面，需要將內容地區包裹在一個容器元素內，並且賦予padding: 0 15px;，為的是抵消掉為.row所設定的margin: 0 -15px;（如果不這樣的話，你的頁面會左右超出視口15px，頁面底部出現橫向捲軸）。

ps.說實話，上面的一大摞有幾句沒有看明白，但是大概的都知道了，不明白的只能通過後面的練習來瞭解明白了，當然這個網格使用讓我想起了用Excel表格。

=================================================================================================

摘抄了這麼多官網的，這些我們又要會到開篇時候說的“不同的媒體查詢閾值範圍”，也就是，下面我們就來瞭解下吧！

【3】柵格選項也就是Bootstrap的柵格系統如何在多種螢幕裝置上工作的。下面我們看下中文官網給出的一張表

從表中我們可以看出是有4個區間對應著自己的裝置，我們假定可視地區為x。

柵格class在螢幕寬度大於或等於閾值的裝置上起作用，並且將針對小螢幕裝置所設定的class覆蓋掉。因此，對任何一個元素應用任何 （開頭）class 將不僅作用於中等尺寸的螢幕，還將作用於大螢幕裝置（如果沒有設定 （開頭）class的話）。