Bootstrapのグリッドシステム

グリッドシステムについて

Bootstrapのグリッドシステムは全部で12カラム用意されています。
12の振分けをいくつにするかでカラムが決まります。

基本形の記述

prefixとブレークポイント

これは画面サイズによってレイアウトを変更する境界ポイントのことです。
表の通りBootstrapではデフォルトで3つのブレークポイントが設定されています。

  • class = “container”(固定枠)または”container-fluid”の中に書く
  • class = “row”の中に書く
  • class = “col-{prefix}-{columns}”の形で書く
  • class = {columns}は合計が12になるようにする
 スマホ  タブレット  PC  PC(大)
 幅  ~767px  768~991px  992~1119px  1120px~
 prefix  xs

(extra small)

 sm

(small)

 md

(middle)

 lg

(large)

 配置ルール  常に横並び  規定の幅を下回ると縦並びになる

公式サイト
公式サイト(英語)

スポンサーリンク

NTTフレッツ光

シェアする

フォローする