Twitter Bootstrap 3 の基本　Grid Systemのサンプル３

ntuti

Twitter Bootstrap 3 の基本　Grid Systemのサンプル３

「グリッドデザイン」の３回目です。グリッドシステムに慣れてきましたでしょうか。
今回は次のようなサンプルを作成します。

今回のサンプル

要素同士の間に隙間をグリッド数で指定する方法
要素のネストを指定する方法
要素の表示順番を指定する方法

では、1つずつサンプルソースを見ていきましょう。
長くなってきたので、bodyタグ内のHTMLのみ記述していきます。

サンプル1：要素同士の間の隙間をグリッド数で指定する方法

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	<div class="row">
		<div class="col-sm-6">.col-sm-6</div>
	</div>
	<div class="row">
		<div class="col-sm-3 col-sm-offset-6">.col-sm-3<br>.col-sm-offset-3</div>
	</div>
	<div class="row">
		<div class="col-sm-6">.col-sm-6</div>
		<div class="col-sm-3 col-sm-offset-3">.col-sm-3<br>.col-sm-offset-3</div>
	</div>
</div><!-- /container -->

→全部で３行分のグリッド指定をしていますが、
「col-sm-offset-*」という記述がある点がいままでと異なるところです。
これは指定した要素の左側に、「*」で指定した数ぶんのグリッドを空けておくというオフセット指定になります。
つまり上記サンプルは、
ひとつ目は６グリッド要素を普通に指定、
ふたつ目は３グリッド要素に６グリッド分のオフセットを指定
３つ目は、６グリッド要素を普通に指定した後、３グリッド分のオフセットを指定し、さらに３グリッド分の要素指定
という形になるわけです。
表示は以下のようになります。

サンプル2：要素のネストを指定する方法

テーブルにもネストがあるように、グリッドシステムにもネストがあります。ネストとは「入れ子」のことです。
つまり「row」が入れ子状態になることをいいます。早速サンプルをみてみましょう。

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	<div class="row">
		<div class="col-sm-8">
			<div class="row">
				<div class="col-sm-6">.col-sm-6</div>
				<div class="col-sm-3">.col-sm-3</div>
			</div>
		</div>
	</div>
</div><!-- /container -->

表示は以下のようになります。

最初に8グリッド分のDIVを用意し、その中に6グリッドと3グリッドのDIVを設けました。
このことからわかることは、子要素は親要素を12グリッドとして、そのグリッドに沿ったサイズで設定されていくということです。

サンプル3：要素の表示順番を指定する方法

普通はHTMLに記述した順に左から要素は表示されていきますが、それを逆にしたいときなどに使える方法です。
サンプルを見てみましょう。

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	<div class="row">
		<div class="col-md-6 col-md-push-3">.col-sm-6</div>
		<div class="col-md-3 col-md-pull-6">.col-sm-3</div>
	</div>
</div><!-- /container -->

「col-md-push-*」「col-md-pull-*」の記述が、今回のポイントです。
pushの方は、右側方向に「*」で指定したグリッド数ぶんだけ移動、
pullの方は、左側方向に「*」で指定したグリッド数ぶんだけ移動、
という意味になります。
ですので、上記例では、middleサイズ以上の表示時に、２つめの要素の方が左側に表示されることになるのです。

注意する点は、「col-XX-push-N」のXXのサイズと移動するサイズN、グリッド数を指定する「col-XX-N」クラスのXXのサイズと移動するサイズNを同じにしておくことです。
また、pushなのかpullなのかも間違えないようにしましょう。
どれかがずれていると、表示全体がくずれてしまうことになります。

ウィンドウサイズが小さくなると、横並びになっていたものを縦並びにするという動きは非常によくあります。
その際、基本的には左側の要素の方が、右側の要素よりも上に並ぶ、という順番が通常です。
これをあえて逆にしたいようなときにこの設定が上手く活用できますね。