Bootstrapざっくり入門 - 2

グリッドシステム

カラム（column : 列）とガター(gutter : 溝)

Bootstrapではページの幅を12列に分割したグリッドシステムを採用しています。
12列に分割されたグリッドの列をカラムと言い、各カラム間の余白をガターと言います。

コンテナ(container : 箱)

グリッドシステムを使用してレイアウトする際、最初に使用するのがコンテナです。
コンテナは、コンテンツを入れる箱で、ページの水平中央にコンテンツを配置する役割を持っています。
コンテナには、固定幅コンテナと可変幅コンテナの2種類があります。

• 固定幅コンテナ
  • 画面サイズによってコンテンツの最大幅を切り替えることができます。
  • ウィンドウを拡大/縮小しても幅は固定です。
  • containerクラスを使います。

<div class="container">
    <!-- ここにコンテンツを入れる -->
</div>

• 可変幅コンテナ
  • 画面サイズ全幅に渡る流動的なコンテンツ幅を持たせることができます。
  • ウィンドウの拡大/縮小に伴い幅が可変（画面幅に対し、常に全幅）
  • container-fuildクラスを使います。

<div class="container-fluid">
    <!-- ここにコンテンツを入れる -->
</div>

rowクラス(行)

コンテナ(箱)の中には、rowクラス(行)を入れます。
rowクラスは、一連のカラムを正しくレイアウトするために使用するクラスで、この中にカラムをまとめます。
複数行にしたいときは、containerの中にrowクラスを指定した要素を追加します。

<div class="container">
    <div class="row"><!-- 1行目 -->
        <!-- ここにカラムを入れる -->
    </div>
    <div class="row"><!-- 2行目 -->
        <!-- ここにカラムを入れる -->
    </div>
</div>

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

グリッドシステムは、一連のコンテナ(containerクラスまたはcontainer-fluidクラス)、行(rowクラス)、カラム(colクラス)を使用してコンテンツをレイアウトします。
基本構造は、コンテナ(containerクラスまたはcontainer-fluidクラス) > 行(rowクラス) > カラム(colクラス)となっています。

<div class="container">
    <div class="row"><!-- row : 行 -->
        <div class="col">1列目</div><!-- col : カラム -->
        <div class="col">2列目</div><!-- col : カラム -->
        <div class="col">2列目</div><!-- col : カラム -->
    </div>
</div>

インデックス

Bootstrapざっくり入門
Bootstrapざっくり入門 - 3

あとがき

随時更新していきます！