グリッドシステムについて
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) |
配置ルール | 常に横並び | 規定の幅を下回ると縦並びになる |
公式サイト
公式サイト(英語)