文章來自于
百度經(jīng)驗(yàn)
bootstrap官方
col-xs- 超小屏幕 手機(jī) (<768px)
col-sm- 小屏幕 平板 (≥768px)
col-md- 中等屏幕 桌面顯示器 (≥992px)
col-lg- 大屏幕 大桌面顯示器 (≥1200px)
col-md-offset-4 偏移量同理
我們都知道bootstrap3.0使用了四種柵格選項(xiàng)來形成柵格系統(tǒng)，這四種選項(xiàng)在官網(wǎng)上的介紹如下圖，很多人不理解，這里跟大家詳解一下四種柵格選項(xiàng)之間的區(qū)別，其實(shí)區(qū)別只有一條就是適合不同尺寸的屏幕設(shè)備。我們看class前綴這一項(xiàng)，我們姑且以前綴命名這四種柵格選項(xiàng)，他們分別是col-xs ,col-sm,col-md,col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是**的縮寫。這樣命名就體現(xiàn)了這幾種class適應(yīng)的屏幕寬度不同。下面我們分別介紹這幾種class的特點(diǎn)。
col-xs類，用法是<div class="col-xs-">。它星號(hào)代表1--12的數(shù)字。我們知道柵格系統(tǒng)總共有12列，我們?cè)谶@里使用數(shù)字幾就代表著該div占用幾列的寬度。假如我們?cè)诮o超級(jí)小屏幕開發(fā)界面，那么我們使用該類，該類沒有任何行為，不管屏幕小到多少，都不會(huì)改變div的布局。 col-sm類，用法是<div class="col-sm-*">。數(shù)字的意義同上，但是該類適合屏幕寬度為750的設(shè)備，如果在屏幕寬度小于750的設(shè)別上，該div就會(huì)水平堆疊。這是在超過750屏幕上的樣式：
col-lg的行為也是一樣的，這里就不演示了
下面說一下如何組合使用這幾個(gè)類。我們使用<div class="col-sm-10 col-md-8">這樣的方式來表示：在中等屏幕設(shè)備上該div占用8列的寬度；在小屏幕上該div占用10列的寬度。
