Bootstrap 柵欄布局中 col-xs-、col-sm-、col-md-、col-lg- 區別及使用方法
（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的柵格系統是如何在多種不同的移動設備上面進行工作的。