(1)概括

一句話概括：根據(jù)顯示屏幕寬度的大小，自動的選用對應(yīng)的類的樣式。

(2)關(guān)鍵字段

1、col是column簡寫：列；

2、xs是maxsmall簡寫：超小，?sm是small簡寫：小，? md是medium簡寫：中等，?lg是large簡寫：大；

3、-* 表示占列數(shù)，即占每行row分12列柵格系統(tǒng)比；

4、.col-xs-* 超小屏幕如手機(jī) (<768px)時使用；

.col-sm-* 小屏幕如平板 (768px ≤ 寬度 ＜992px)時使用；

.col-md-* 中等屏幕如普通顯示器 (992px ≤ 寬度 ＜ 1200px)時使用；

.col-lg-* 大屏幕如大顯示器 (≥1200px)時使用。

(3)解釋

為了更好的理解Bootstrap框架的網(wǎng)格系統(tǒng)工作原理，我們來看一張草圖：

最外邊框，帶有一大片白色區(qū)域，就是相當(dāng)于瀏覽器的可視區(qū)域。在Bootstrap框架的網(wǎng)格系統(tǒng)中帶有響應(yīng)式效果，其帶有四種類型的瀏覽器(超小屏，小屏，中屏和大屏)，其斷點(像素的分界點)是768px、992px和1220px。

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

從上面的截圖可以看出來，Bootstrap針對不同尺寸的屏幕(包括手機(jī)、平板、PC等等)設(shè)置了不同的樣式類，這樣讓開發(fā)人員在開發(fā)時可以有更多的選擇。

(4)實例

例一：單獨(dú)使用

col-md-4

總結(jié)

以上是生活随笔為你收集整理的bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。