2015/06/29  Bootstrap 

Bootstrapのグリッドシステムを利用すればレスポンシブサイトが簡単に作ることができます。

グリッドシステムって?

レイアウトを均等に分けてマス目上にレイアウトを考えること。12等分にされていて8:4や4:4:4にしたり、合わせて12になるようにお好みにレイアウトが組むことができます。
ブラウザを小さくしてみてください。Bootstrapのグリッドシステムはレスポンシブなのでスマホのサイズにもレイアウト調整してくれるのでとても便利です。

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<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>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

レイアウト構成

大枠に.containerを指定することで通常の固定画面サイズに表示します。.rowで列表示を区切ります。

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

フルサイズにしたい場合

.container.container-fluid に変更することで全幅レイアウトに切り替えることができます。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

グリッドシステムの画面サイズ

Bootstrapのレイアウトは4段階構成

モバイル(スマホ)、タブレット、デスクトップ1200px未満、1200px以上の4段階でわかれています。

デバイス 意味 クラス(*は数値)
モバイル(スマホ)
768px未満
エクストラスモール=xs col-xs-*
タブレット
768px以上992px未満
スモール=sm col-sm-*
デスクトップ
992px以上1200px未満
ミディアム=md col-md-*
デスクトップ
1200px以上
ラージ=lg col-lg-*

cssでの分岐はこんな感じ。

/* Extra small devices: Phones (<768px) */
@media (max-width: 767px) {}

/* Small devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium devices: Desktops (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}

モバイルとデスクトップ

モバイル .col-xs-* とデスクトップ .col-md-* で分ける場合はこんな使い方があります。

モバイルは2カラム、デスクトップでは3カラム並び

モバイルは50%幅、デスクトップでは33.3%幅にしてくれます。

.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4

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

モバイル、デスクトップとも2カラム並び

モバイルでもデスクトップでも50%幅にしてくれます。

.col-xs-6
.col-xs-6

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

表示・非表示クラス

スマホの場合は表示させたくない!?などデバイスの個別対応したいときに便利です。

モバイル
768px未満
タブレット
768px以上992px未満
デスクトップ
992px以上1200px未満
デスクトップ
1200px以上
.visible-xs 表示
.visible-sm 表示
.visible-md 表示
.visible-lg 表示
.hidden-xs 表示 表示 表示
.hidden-sm 表示 表示 表示
.hidden-md 表示 表示 表示
.hidden-lg 表示 表示 表示

印刷の表示・非表示

クラス ブラウザ 印刷
.visible-print-block
.visible-print-inline
.visible-print-inline-block
表示
.hidden-print 表示