1. Home
2. 基本
3. グリッドシステム

グリッドシステム

Bootstrap3は横幅を12等分にしたグリッドシステムです。12の振分けをいくつにするかでカラムが決まります。
例えば8:4の2カラムとか、3:6:3などの3カラムとかも簡単に作成できます。 また、ブレイクポイントが3箇所標準で設定されていて、各サイズでどのように表示するかも指定できます。
※ブレイクポイントとは表示デバイス（ウィンドウサイズ）によってレイアウトの表示を切り替えるポイントになります。スマホ、タブレット、PCなどそれぞれレスポンシブでレイアウトを変更することも可能です。

• グリッドシステムのブレイクポイント
• グリッドシステムの基本
• グリッドシステムの様々な設定例
• ブレイクポイントごとの表示設定

グリッドシステムのブレイクポイント

3箇所のブレイクポイント

ブレイクポイントは768px,992px,1200pxに用意されており767px以下、768px以上、992px以上、1200px以上の4種類でレイアウトを切り替えることが可能です。
それぞれcol-[prefix]-[数字]というクラスで指定することで該当のブレイクポイントでレイアウトを変更できます。それぞれで指定するクラス名は下記表を参照してください。
※prefixとは日本語で「接頭辞」という意味で文字の先頭あたりに使われる特別な意味を持った言葉みたいな物らしいです。こちらだとxsはextra small、smはsmallの略で使われているものです。

ブレイクポイント

デバイスの表記は目安になります。例えばタブレットはipad（mini,airなど含む）の縦表示のサイズになります。解像度ではなくブラウザの表示サイズが基準です。タブレットでも機種によってはPCサイズで表示される可能性がある点に注意してください。

細かな設定を知りたい方は公式サイトへGO!

• 公式サイト（英語）の説明箇所

グリッドシステムの基本

レイアウト方法

グリッドシステムを利用してレイアウトしていくためのルール

• .container（固定枠）または.container-fluid（流動枠で外枠を設定）
• .rowで行を設定
• .col-[prefix]-[数字]でカラムを設定
  [prefix]でブレイクポイントの接頭辞（xsやmdなど）を指定。
  [数字]でカラムの幅を設定。基本prefixごとに合計で12になるように指定します。12以上になるといわゆるカラム落ちで表示されます。

分かりづらい部分もあるかもしれませんが、例えばタブレットサイズ以上で8:4の2カラムを設定したい場合は下記のようなソースになります。

				<div class="container">
					<div class="row">
						<div class="col-sm-8">col-sm-8</div>
						<div class="col-sm-4">col-sm-4</div>
					</div>
				</div>

スマホサイズ用の.col-xs-の指定がない場合は基本的にウインドウサイズを小さくすると1カラムになるのも憶えておくと良いと思います。上記の場合ですと.col-sm-8、.col-sm-4とそれぞれ指定した部分はウインドウサイズが767px以下になるとそれぞれ1カラムになって縦に並びます。
上記例以外も含めたデモページを用意したのでレイアウトの変化を確認してみてください。

• グリッドシステムの基本例
• .containerと.container-fluidの違い

グリッドシステムの様々な設定例

ブレイクポイントごとにカラムを設定

例えばタブレットでは4カラム、スマホでは2カラムで表示したい場合などは複数クラスを指定することで設定できます。

				<div class="container">
					<div class="row">
						<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
						<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
						<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
						<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
					</div>
				</div>

下記に上記の設定デモを用意しましたので表示の確認をしてみてください。
上記以外の設定デモも一緒に掲載しています。

• ブレイクポイントごとにカラム設定したデモページ

カラムを入れ子にした設定

カラムを入れ子にしてカラムの中にカラムを設定することも可能です。

				<div class="row">
					<div class="col-sm-9">Level 1:.col-sm-9
						<div class="row">
							<div class="col-xs-8">Level 2: .col-xs-8</div>
							<div class="col-xs-4">Level 2: .col-xs-4</div>
						</div>
					</div>
					<div class="col-sm-3">Level 1:.col-sm-3</div>
				</div>

• カラムを入れ子にした設定デモ

カラムのオフセット

途中に空欄を設けた形でカラムを設置することも可能です。

				<div class="row">
					<div class="col-sm-4">.col-sm-4</div>
					<div class="col-sm-4 col-sm-offset-4">.col-sm-4 .col-sm-offset-4</div>
				</div>

• カラムのオフセット設定デモ

カラムの順序

普通は先に記述したカラムが左にきますが、.col-[prefix]-push-*と.col-[prefix]-pull-*クラスを使うことで表示される順序を変更することができます。

				<div class="row">
				 <div class="col-sm-9 col-sm-push-3">.col-sm-9 .col-sm-push-3</div>
				 <div class="col-sm-3 col-sm-pull-9">.col-sm-3 .col-sm-pull-9</div>
				</div>

• カラムの順序設定デモ

ブレイクポイントごとの表示設定

ブレイクポイントごとに表示・非表示を切り替えることが出来るクラス設定の一覧です。

上記のクラス指定をすることでブレイクポイントごとに表示・非表示を切り替えることが出来ます。スマホの時（767px以下）のみ表示するなどが可能になります。逆にスマホの時のみ非表示することも可能。
上記の.visible-[prefix]-*クラスは.visible-[prefix]のみでも有効です。*部分はblock,inline,inline-blockの3種類ありcssのdisplayの指定を変更できます。指定なしの場合はdisplay:block;が設定されます。

• 表示・非表示設定デモ