Boostrap:グリッド

説明

Boostrapのグリッドは、画面サイズごとにレイアウト調整を自動で行ってくれます。
PC、タブレット、スマホなど異なる画面サイズに対応させるWEBサイトを作るときに便利です。

使い方

グリッドはcontainerとrowの内部に記述します。。
グリッドはclass属性にcol-md-6のように指定します。 数値部分は合計12になるように割り振ります。。

グリッドのサンプルソース

	<div class="row">
		<div class="col-md-6" style="background-color:#f8ffb9">A</div>
		<div class="col-md-6" style="background-color:#d7e3f9">B</div>
		※赤字の数値の合計が12になるようにする。
	</div>

	<div class="row">
		<div class="col-md-4" style="background-color:#b6a6c5">C</div>
		<div class="col-md-4" style="background-color:#beccdc">D</div>
		<div class="col-md-4" style="background-color:#eeb7bb">E</div>
	</div>
	<div class="row">
		<div class="col-md-3" style="background-color:#beccdc">F</div>
		<div class="col-md-3" style="background-color:#eeb7bb">G</div>
		<div class="col-md-2" style="background-color:#b6a6c5">H</div>
		<div class="col-md-4" style="background-color:#b4feb4">I</div>
	</div>
	

グリッドのサンプル
画面サイズを変更するとレイアウトが調整されます。

グリッドのサイズについて
サイズは大きい順にlg,md,sm,xsから指定できます。
極小のxsを指定する場合、「col-xs-6」のように記述します。