Bootstrap3のグリッドシステムの使い方

Bootstrap3.3.5のグリッドシステムの使い方

Bootstrap3 Gridsystem

Pocket

Bootstrap3 のグリッドレイアウトとは

画面を論理的な格子状のグリッドに分割してレイアウトを行います。このグリッドの配列によってレスポンシブなレイアウトが実現します。水平方向に12個のグリッドに固定されていますので、水平方向、横に占める列数を指定するクラス名を付加したブロックを作成します。

グリッドレイアウトの使い方

グリッドレイアウトの基本的な使い方

固定された12個のグリッドのレイアウト方法は

  1. まず最初に.container(固定枠)または.container-fluid(流動枠)の外枠を設置します。
  2. 外枠の中に、水平方向一直線上にグリッドグループを配置するための割り付け枠.rowを作成します。
  3. 割り付け枠の中にカラム数とブラウザ表示幅を指定したグリッドを.col-md-8のような形式で指定します。

設定例

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

表示例
グリッドレイアウトの使い方

.container と .container-fluid の違い

768 px 以下では.container(固定枠)も.container-fluid(流動枠)も違いはありません。1200 px と 992 px に各々ブレイクポイントが設定されていて.containerは段階的にリサイズされます。.container-fluidは画面サイズに合わせて流動的に画面にフィットします。
bootstrap.css 記載内容

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

デバイス別表示例

ブラウザの表示幅に応じて異なる接頭辞を持つクラスが用意されています。例えばcol-md-という接頭辞を持つクラスは、幅992px未満では縦積みで表示され、992px以上の場合は横方向に配置されます。

デスクトップ

デバイス別表示例・デスクトップ

タブレット

デバイス別表示例・タブレット

スマートフォン

デバイス別表示例・スマートフォン

グリッド列数の指定方法

マルチデバイスによる設定

デバイス ブラウザの幅 .containerの幅 カラムの指定
大画面 1200px以上 1170px col-lg-xx
デスクトップ 992px以上 970px col-md-xx
タブレット 768px以上 750px col-sm-xx
スマートフォン 768px未満 100% col-xs-xx

記入例

<div class="container">

<h2>col-lg のブロックの並び方</h2>
<div class="row">
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<!-- .raw --></div>

<h2>col-md のブロックの並び方</h2>
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<!-- .raw --></div>

<h2>col-sm のブロックの並び方</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<!-- .raw --></div>

<h2>col-xs のブロックの並び方</h2>
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
<!-- .raw --></div>

<!-- .container --></div>

デバイス別表示例

大画面

デバイス別表示例・大画面

デスクトップ

デバイス別表示例・デスクトップ

タブレット

デバイス別表示例・タブレット

スマートフォン

デバイス別表示例・スマートフォン