Bootstrap 3.3.7 グリッドシステム
グリッドシステムとは
Bootstrapを使う大きな利点は、画面サイズに応じてレイアウトを自動調整できる点である。その中心になるのがグリッドシステムである。
グリッドシステムは、表示内容をいくつかのブロックに分け、縦横に分割したグリッド領域へ配置する方法である。広いPC画面では2つのブロックを横並びにし、スマートフォンのような狭い画面では縦に並べられる。
<div class="container">
<div class="container-fluid">
<div class="row">
<div>内容</div>
<div>内容</div>
</div>
</div>
</div>
containerは外側のコンテンツ領域、container-fluidは横幅いっぱいのコンテナ、rowは横方向の行を表す。行の中に列クラスを指定してレイアウトを決める。
コンテナ
レイアウトを作る最上位要素に.containerまたは.container-fluidを追加する。
| クラス | 説明 |
|---|---|
.container |
固定幅レイアウトを作る。 |
.container-fluid |
左右いっぱいのレイアウトを作る。 |
.containerは画面幅に応じて、768px未満では100%、768px以上では750px、992px以上では970px、1200px以上では1170pxになる。.container-fluidは画面幅に関係なく100%幅である。
幅を調整するクラス
グリッドシステムの要点は、row内の内容に指定するクラスである。形式はcol-種類-数字である。
| 種類 | サイズ | 主なデバイス |
|---|---|---|
lg |
1200px以上 | PC、タブレット |
md |
992から1200px | タブレット |
sm |
768から992px | タブレット |
xs |
768px未満 | スマートフォン |
数字はrow全体を12分割したうち、どれだけの幅を使うかを示す。6と6なら半分ずつ、4と8なら1:2の比率になる。合計が12を超えると次の行へ折り返される。
<div class="container">
<h1>グリッドシステム</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">MENU</div>
<div class="col-sm-8">Content.</div>
</div>
</div>
</div>
複数の画面サイズに対応する
対応したい画面幅ごとにクラスを指定する。
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">MENU</div>
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-12">Content.</div>
</div>
| 種類 | サイズ | 比率 |
|---|---|---|
lg |
1200px以上 | 2:10 |
md |
992から1200px | 3:9 |
sm |
768から992px | 4:8 |
xs |
768px未満 | 12:12、それぞれ1行ずつ表示 |
このように設定すると、メニューの幅をある程度保ちながら内容部分を広げられる。スマートフォンではメニューの下に内容が縦に表示される。
オフセットとvisible
グリッドシステムには表示を調整する機能もある。
オフセット
オフセットは指定したブロックの前に空白を置くためのもので、col-種類-offset-数字の形式で指定する。
class="col-md-offset-1 col-md-3"
これは前に1ブロック分の空白を置き、3ブロック分の内容を表示する。
visible
visibleは指定したデバイス幅の場合だけ内容を表示する。
class="visible-md-block"
この要素はmd幅、つまり992から1200pxの場合だけ表示される。オフセットやvisibleを組み合わせることで、スマートフォン、タブレット、PCごとにレイアウトを変えられる。