グリッドシステム
Bootstrap3からレスポンシブデザイン（可変レイアウト）がデフォルトになりクラス設定が変更されています。
Bootstrap2からBootstrap3に変更する場合は注意して下さい。
基本的な考え方は変わっておらず以下の通りとなります。
- containerで表示枠を設定
- rowで割付枠を設定
- col-**-**でカラム数を設定（カラム数の合計は12で以前と同じです）
表示デバイス（ウィンドウサイズ）によりレイアウトが変わってきます。
基本的にPCでコーディングし表示確認を行うと思いますが、最低でもブラウザのリサイズを行い各表示デバイスサイズの表示確認をして下さい。
グリッドシステムの設定
| Extra small devices 携帯電話 |
Small devices タブレット |
Medium devices デスクトップPC |
Large devices デスクトップPC |
|
|---|---|---|---|---|
| ブラウザ表示幅 | 768px未満 | 768px～991px | 992px～1199px | 1200px以上 |
| container最大幅 | auto | 750px | 970px | 1170px |
| Class名称 | col-xs-** | col-sm-** | col-md-** | col-lg-** |
| カラム数 | 12 | |||
| カラム最大幅 | auto | 60px | 78px | 95px |
| カラム余白 | 30（左右に15pxの余白） | |||
| 入れ子表示 | 有効 | |||
| オフセット表示 | 無効 | 有効 | ||
| カラム表示順 | 無効 | 有効 | ||
可変レイアウトで表示する
例01－デスクトップサイズ（Large devices）のみカラム指定を行う
レイアウト説明
デスクトップサイズ（Large devices）のみカラム指定（4カラムと8カラム）を行っています
ここでウィンドウサイズをドラッグして幅を変更すると以下のように表示されます
・デスクトップサイズ以上（1200px～）のウィンドウサイズで表示している場合は、横に並んでカラム指定通り（4カラムと8カラム）の表示が行われます
・デスクトップサイズ未満（～1199px）のウィンドウサイズになった場合には、縦に積まれて表示されカラム指定も無視されて表示されます
例02－デスクトップサイズ（Medium devices）のみカラム指定を行う
レイアウト説明
デスクトップサイズ（Medium devices）のみカラム指定（4カラムと8カラム）を行っています
ここでウィンドウサイズをドラッグして幅を変更すると以下のように表示されます
・デスクトップサイズ以上（992px～）のウィンドウサイズで表示している場合は、横に並んでカラム指定通り（4カラムと8カラム）の表示が行われます
・デスクトップサイズ未満（～991px）のウィンドウサイズになった場合には、縦に積まれて表示されカラム指定も無視されて表示されます
例01・例02から、カラム指定を行っていないウィンドウサイズになった場合
・指定されているデバイスサイズ以上の時は、カラム指定が維持される
・指定されているデバイスサイズ未満の時は、縦に積まれて表示される
という事がわかります
例03－携帯電話サイズ（Extra small devices）のみカラム指定を行う
レイアウト説明
携帯電話サイズ（Extra small devices）のみカラム指定（4カラムと8カラム）を行っています
ここでウィンドウサイズをドラッグして幅を変更すると以下のように表示されます
・どのデバイスサイズになってもカラム指定が維持される
col-xs-**を指定するとカラムレイアウトが常に一定で万能そうですが、携帯電話サイズの表示になると見辛い場合もあるので確認して指定しましょう
例04－複数のサイズ指定を行う
レイアウト説明
全てのサイズのカラム指定を行っています
ここでウィンドウサイズをドラッグして幅を変更すると以下のように表示されます
・デスクトップサイズ（1200px～）の場合は、カラム指定（6カラム・4カラム・2カラム）が横に並んで表示されます
・デスクトップサイズ（992px～1199px）の場合は、カラム指定（2カラム・4カラム・6カラム）が横に並んで表示されます
・タブレットサイズ（768px～991px）の場合は、カラム指定（4カラム・4カラム・4カラム）が横に並んで表示されます
・携帯電話サイズ（～768px）の場合は、カラム指定が縦に積まれて表示されます
12カラムを超える場合は縦方向に積まれて表示されます
カラムを入れ子にする
仕様
分割したカラムを更に分割すると入れ子表示になります
レイアウト説明
デスクトップサイズ（Medium devices）のみカラム指定（8カラム・分割6カラム・分割6カラム）を行っています
今までと同じく、カラム指定を行っていないウィンドウサイズになった場合
・指定されているデバイスサイズ以上の時は、分割は維持される
・指定されているデバイスサイズ未満の時は、分割が無くなり縦に積まれて表示される
となります
オフセットカラムの指定
仕様
カラムの左側に空白カラムを挿入します
指定方法は、col-**-** col-**-offset-**となり空白右側のカラムと一緒に記述します
定義されているオフセットカラムのクラスは以下の通り
col-lg-offset-0 ～ 11・col-md-offset-0 ～ 11・col-sm-offset-1 ～ 11
携帯電話サイズ（Extra small devices）ではオフセットカラムの指定は出来ないので注意してください
レイアウト説明
デスクトップサイズ（Medium devices）のみカラム指定（4カラム・空白4カラム・4カラム）を行っています
今までと同じく、カラム指定を行っていないウィンドウサイズになった場合
・指定されているデバイスサイズ以上の時は、カラム・空白カラムは維持される
・指定されているデバイスサイズ未満の時は、空白カラムが無くなり縦に積まれて表示される
となります
コーディング
- col-**-offset-**
- 03行目 指定したデバイスサイズの空白カラムを指定します
カラムの表示順を指定
仕様
カラムの表示順を入れ替えます
指定方法は、右に移動するカラムはcol-**-** col-**-push-**・左に移動するカラムはcol-**-** col-**-pull-**となります
定義されているオフセットカラムのクラスは以下の通り
col-lg-push-0 ～ 11・col-md-push-0 ～ 11・col-sm-push-1 ～ 11
col-lg-pull-0 ～ 11・col-md-pull-0 ～ 11・col-sm-pull-1 ～ 11
携帯電話サイズ（Extra small devices）ではカラムの表示順を指定出来ないので注意してください
レイアウト説明
コードを見るとわかると思いますが、実際に表示されているカラム表示と左右逆転しているのがわかります
今までと同じく、カラム指定を行っていないウィンドウサイズになった場合
・指定されているデバイスサイズ以上の時は、カラムの表示順は維持される
・指定されているデバイスサイズ未満の時は、カラムの表示順は元に戻り縦に積まれて表示される
となります
コーディング
- col-**-push-**
- 02行目 指定したデバイスサイズのカラムを右に移動します
- col-**-pull-**
- 03行目 指定したデバイスサイズのカラムを左に移動します