Bootstrapの勉強①

---

CakePHP に飽きたので、次は Bootstrap の本を読み始めました。

Bootstrap の概要

主に、Web のフロントエンドの開発用フレームワークです。いい感じの CSS が用意されていて、いい感じにレイアウトが組めるフレームワークだと理解しています。GUI コンポーネントも用意されているようです。もともとは Twitter の開発チームが作っていたもので、メインの開発者が Twitter を退社したのを機に独立したプロジェクトになったようです。

特徴としては以下のとおりです。

• レスポンス Web デザインに対応
• グリッドシステムによるレイアウト
• いい感じの GUI コンポーネント

グリッドシステム

Bootstrap のグリッドシステムは、横方向に 12 個のグリッドがあり、そこにコンテナを設定していきます。各コンテナがグリッド何個分の幅か、どの画面サイズに適用するかなどを設定していきます。特徴的なのは、画面サイズはモバイルファースト、つまり、小さい画面を基準として設定していくところです。小さい画面のレイアウトは必ず定義し、大きい画面向けにはそのレイアウト定義を上書きしていくように書くことができます。この仕組によって、レスポンシブ Web デザインの記述をやりやすくしています。

最上位の div は、全画面表示のコンテナを定義しています。その中に、列に対応する row を指定した div を定義し、その中にカラムを書きます。カラムには複数のクラスが設定されています。

col-12

は全画面サイズで 12 個分のグリッドのカラムを使う設定、

col-mid-4

や

col-mid-8

は、画面サイズ Middle 以上（768px 以上）で 4 カラムや 8 カラム分を使う設定です。先程も書いたとおり、画面サイズ Middle 以上では col-mid- の設定が優先されます。

row や col には、水平垂直方向のレイアウト方法の指定や、コンポーネント間のマージンやパディングの設定を変更するためのクラスを設定することもできます。また、col の子供に row を定義すること（ネスト）も可能です。

色々と便利なユーティリティがあるようなので、おいおい調べていこうと思います。

スタイリング

Bootstrap の CSS には、タイポグラフィ（文字の装飾）や画像、テーブルにもある程度おしゃれな感じの設定がされています。また、レスポンシブデザイン用のレイアウト用ユーティリティが豊富に用意されているようです。この辺は、使うときに詳しく調べます。

さて、もう一つ大事なのが初期設定です。Bootstrap ではブラウザ間の差異をなくすために、デフォルトの設定をいくらかしています。自分で細かいレイアウトをいじるときにわからなくならないよう、ここは把握しておく必要がありそうです。（bootstrap-reboot.css に書いてあるようです）

大事そうなところをメモしておきます。

今日はここまで

本を見ていると、Web ページでよく使う以下のようなコンポーネントが用意されているようです。

• ジャンボトロン（トップページにあるメインビジュアルみたいなやつ）
• アラート表示
• バッジ
• プログレスバー
• カード
• メディアオブジェクト（コメント欄みたいなやつ）
• ナビゲーションバー
• パンくずリスト
• ページネーション
• フォーム周り

超便利だ。メモだけしておいて、使う機会に適宜調べていこうと思います。