(1)概括

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

(2)關鍵字段

1、col是column簡寫：列；

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

3、-* 表示占列數，即占每行row分12列柵格系統比；

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

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

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

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

(3)解釋

為了更好的理解Bootstrap框架的網格系統工作原理，我們來看一張草圖：

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

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

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

(4)實例

例一：單獨使用

col-md-4

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。