Bootstrap コード

私は、Bootstrap を使ったコードを書くときは、Bootstrap 公式にある Base Template に少し手を修正を加えたものをテンプレートとして使っています。

私が保管している Bootstrap テンプレートは以下のようになっています。

ポイント

Bootstrap の Base Template には色々な配慮が最初から入っています。
いつも書き忘れたり、書き方を忘れたりするキャラセットも、IEの場合のレンダリングモード固定化、スマホで閲覧したときの挙動を定義した viewport も最初から設定してくれています。
他にもIE挙動への対策がされているので、何かと便利です。

• 3行目 言語設定
  lang="ja" にします。（扱う言語は日本語なので）
• 10行目 カスタムスタイルシート
  default.css 自分でCSSをカスタマイズしたいので、bootstrap css の次の行に最初から書いておきます。

<!-- レイアウトを書く場所 --> と書いている場所に、いよいよ自分でデザインしたレイアウトを書き込んでいきます。

コーディング

前回記事で使用した例をここにも記載します。

上の図のようなレイアウトを Bootstrap で書くと、以下のように書きます。

• レイアウト要素に、div タグを使用していて、class オプションに Bootstrap。
• 全体を class="container" で囲っています。（1行目 ～ 27行目）
• 中に、class="row" という3つのかたまりがあります。
  （3行目 ～ 8行目）
  （10行目 ～ 15行目）
  （17行目 ～ 25行目）
  つまり、このレイアウトには「行要素」を３つ定義しているということです。
• 各 row の中には更に、class="col-md-XX" というオプションが指定されています。
  XXは、12等分した列のうちの何個分の列をまとめるかを指定しています。
  ※ md って書いてあるところはどういう意味？ と思われるかもしれませんが、次回以降で説明します。

成果物

最終的に、コードは以下のようになります。