前言

在前面的一篇文章當中，我們主要學習了柵格系統的基本原理，以及通過簡單案例進行對原理的實踐。

那么本文的主要內容將主要分為以下幾個部分

1.柵格選項

2.從堆疊到水平排列

3.移動設備和桌面

4.Responsive column resets

5.列偏移

6.嵌套列

7.列排序

8.總結

柵格選項

　　通過下面的截圖可以比較清楚的來查看Bootstrap的柵格系統是如何在多種不同的移動設備上面進行工作的。

從上面的截圖可以看出來，Bootstrap針對不同尺寸的屏幕（包括手機、平板、PC等等）設置了不同的樣式類，這樣讓開發人員在開發時可以有更多的選擇。根據我的理解：如果在一個元素上使用多個不同的上面的樣式類，那么元素會根據在不同尺寸選擇最合適（匹配最理想的）的樣式類。簡單的舉例進行說明：比如在一個元素上我們使用了兩個樣式類：.col-md-和.col-lg?？梢詫φ丈厦娴慕貓D來看

第一種情況：尺寸》=1200px;那么會選擇.col-lg。

第二種情況：尺寸》=992px 并且尺寸《=1200px;那么會選擇.col-md。

第三種情況如果尺寸《992px;那么這兩個樣式類都將不會作用于元素上。

從堆疊到水平排列

　　柵格選項中的四個樣式類的使用都是依附于.row類的基礎上，而.row類通常都會在.container的里進行。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表