簡単にHTMLレイアウトが作れちゃう Bootstrap (2)

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行目)
    つまり、このレイアウトには「行要素」を3つ定義しているということです。
  • 各 row の中には更に、class="col-md-XX" というオプションが指定されています。
    XXは、12等分した列のうちの何個分の列をまとめるかを指定しています。
    ※ md って書いてあるところはどういう意味? と思われるかもしれませんが、次回以降で説明します。

成果物

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です