bootstrapグリッドシステム

1448 ワード

最小単位colは、携帯電話(768 px以下)、タブレット(768-992 px)、デスクトップ(992 px+)、超大画面(1200 px+)、
 
 
/*  ( ,  768px) */
/* Bootstrap   */

/*  ( ,768px  ) */
@media (min-width: @screen-sm-min) { ... }

/*  ( ,992px  ) */
@media (min-width: @screen-md-min) { ... }

/*  ( ,1200px  ) */
@media (min-width: @screen-lg-min) { ... }

メッシュオプション


次の表では、Bootstrapグリッドシステムが複数のデバイスにわたってどのように動作するかをまとめます.
超小型デバイス収集(<768 px)小型デバイスタブレット(≧768 px)中型デバイスデスクトップ(≧992 px)大型デバイスデスクトップ(≧1200 px)
グリッドの動作
ずっと水平だった
折りたたみで始まり、ブレークポイント以上は水平です
折りたたみで始まり、ブレークポイント以上は水平です
折りたたみで始まり、ブレークポイント以上は水平です
最大コンテナ幅
None (auto)
750px
970px
1170px
Class接頭辞
.col-xs-
.col-sm-
.col-md-
.col-lg-
列#
12
12
12
12
最大列幅
Auto
60px
78px
95px
ギャツプ幅
30 px(1カラムの各エッジ15 px)
30 px(1カラムの各エッジ15 px)
30 px(1カラムの各エッジ15 px)
30 px(1カラムの各エッジ15 px)
ネスト可能
Yes
Yes
Yes
Yes
オフセット量
Yes
Yes
Yes
Yes
列のソート
Yes
Yes
Yes
Yes