Bootstrap備忘録～グリッド～

はじめに

仕事でBootstrapを使う機会があったので、備忘録としてまとめました。
あくまでも自分用。間違い等あればご指摘ください

Bootstrapとは

HTML、CSS、JaveScriptなどが組み込まれたフレームワーク。
ボタンや入力フォームなどのデザインがあらかじめ用意されているため、手軽にWEBページのデザインができる。

公式ドキュメント

グリッドシステムとは

デバイスの画面を縦に12分割して管理する仕組み。
グリッドシステムを利用することで、異なるデバイスからアクセスしても崩れないレイアウトで作成できる。
container、row、colという要素を用いて設定する。

container：一番外枠の部分。この中を12分割することができる。
row：分割する行を選択する。
col：分割する幅を選択する。

イメージはこんな感じ。

書き方

まずはcontainerを用意する。

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

この中にrowを入れる。

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

さらにその中に分割したい分だけcolを入れる。

colに何も設定しないと、均等に分割される。
以下の例では均等に3分割される。

<div class="container">
 <div class="row">
   <div class="col">
   　分割１
   </div>
   <div class="col">
   　分割２
   </div>
   <div class="col">
   　分割３
   </div>
 </div>

colに大きさを設定すると、自由な大きさに分割することができる。
以下の例では左が小さく、右が大きく分割される。

<div class="container">
 <div class="row">
   <div class="col-5">
   　左が小さい
   </div>
   <div class="col-7">
   　右が大きい
   </div>
 </div>

実例

コーディング例

先ほどの例を元に作成した。
rowを複数指定しているため、行ごとに異なる分割が実現できている。

<div class="container">
  <div class="row"><!--等分-->
    <div class="col bg-primary text-center">
      <img src="フルーツサンド.png">
    </div>
    <div class="col bg-success text-center">
      <img src="亀パン.png">
    </div>
    <div class="col bg-warning text-center">
      <img src="シナモンロール.png">
    </div>
  </div>
  <div class="row"><!--左を小さく-->
    <div class="col-5 bg-primary text-center">
      <img src="フルーツサンド.png">
    </div>
    <div class="col-7 bg-success text-center">
      <img src="亀パン.png">
    </div>
  </div>
</div>

画面イメージ

実際の画面は以下の通り。

参考サイト

Bootstrapのグリッドシステムの概要
Bootstrapのグリッドを理解する【図解たっぷりBootstrap入門】