Bootstrap為不同的屏幕尺寸定義了不同的柵格樣式,例如上一次用到的col-md-6,就是針對(duì)中型屏幕(md)的定義.其他三種分別是超小(xs)/小型(sm)/大型(lg).那么這些設(shè)備指的是屏幕多大的設(shè)備,不同設(shè)備的列寬是多少呢,下面我找到了一個(gè)表,挪用過來記錄一下.
|超小屏幕設(shè)備(<768px)|小屏幕設(shè)備(≥768px)|中等屏幕設(shè)備(≥992px)|大屏幕設(shè)備(≥1200px)
----|:----:|:----:|:----:|:----:
柵格系統(tǒng)行為| 總是水平排列| 開始是水平排列,超過這些設(shè)備的最大值將變?yōu)樗脚帕衸同左|同左
最大container寬度| 自動(dòng)|750px|970px|1170px
樣式前綴|.col-xs-|.col-sm-|.col-md-|.col-lg-
列數(shù)|12|12|12|12
最大列寬|自動(dòng)|60px|78px|95px
padding|30px(左右均為15px)|30px|30px|30px
有了上面這些css的定義,我們就可以將不同大小的設(shè)備簡(jiǎn)化為這四種屏幕設(shè)備,來針對(duì)這四種類型的設(shè)備編寫不同的代碼,從而簡(jiǎn)化在很多種設(shè)備上開發(fā)頁(yè)面遇到的問題.
