前言

在前面的一篇文章當(dāng)中，我們主要學(xué)習(xí)了柵格系統(tǒng)的基本原理，以及通過(guò)簡(jiǎn)單案例進(jìn)行對(duì)原理的實(shí)踐。

那么本文的主要內(nèi)容將主要分為以下幾個(gè)部分

1.柵格選項(xiàng)

2.從堆疊到水平排列

3.移動(dòng)設(shè)備和桌面

4.Responsive column resets

5.列偏移

6.嵌套列

7.列排序

8.總結(jié)

柵格選項(xiàng)

　　通過(guò)下面的截圖可以比較清楚的來(lái)查看Bootstrap的柵格系統(tǒng)是如何在多種不同的移動(dòng)設(shè)備上面進(jìn)行工作的。

從上面的截圖可以看出來(lái)，Bootstrap針對(duì)不同尺寸的屏幕（包括手機(jī)、平板、PC等等）設(shè)置了不同的樣式類，這樣讓開(kāi)發(fā)人員在開(kāi)發(fā)時(shí)可以有更多的選擇。根據(jù)我的理解：如果在一個(gè)元素上使用多個(gè)不同的上面的樣式類，那么元素會(huì)根據(jù)在不同尺寸選擇最合適（匹配最理想的）的樣式類。簡(jiǎn)單的舉例進(jìn)行說(shuō)明：比如在一個(gè)元素上我們使用了兩個(gè)樣式類：.col-md-和.col-lg。可以對(duì)照上面的截圖來(lái)看

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

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

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

從堆疊到水平排列

　　柵格選項(xiàng)中的四個(gè)樣式類的使用都是依附于.row類的基礎(chǔ)上，而.row類通常都會(huì)在.container的里進(jìn)行。

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表