Bootstrapで段組を作る（グリッドシステムを利用する）

Bootstrapでは、段組を簡単に作成できるようになっています。
Bootstrap：Grid System

基本的に最初にコンテンツを中央寄せで表示するために”container”をbodyタグ（開始）に追加して、その中にグリッドを構築していきます。

<div class="container">
....
</div>

段組の作成方法は、行（row）を作成して、その中で列（col）に分割していくイメージで作成できます。Grid SystemページのサンプルをもとにHTML（下のHTML）で段組を作成すると、上の画像のように段組が作成されます。

Bootstrapでは、カラムとして12個の列を作成できるようになっていて、クラス名に「col-md-数字」で設定します。数字は、合計して12になるように設定します。

<div class="row">
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
	<div class="col-md-8">.col-md-8</div>
	<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
</div>

段組の作成方法を簡単にまとめると、最初に行を作成（class名はrow）します。

<div class="row"></div>

次に行の中でカラムを作成します。カラムのclass名は、「col-md-数字」で数字の合計を12になるようにします。

<div class="row">
	<div class="col-md-6"></div> 
	<div class="col-md-6"></div> 
</div>

また、col-md-数字以外にもデバイス（パソコンやスマホ、タブレット）によってサイズを書いることができます。

col-xs-数字
col-sm-数字
col-md-数字
col-lg-数字