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

スポンサードリンク

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

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

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

grid1

段組の作成方法は、行(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-数字

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です