今更こんなこと、知らない人のほうが珍しいという世の風潮に流されてなんとなく知ってるようなふりをしている方（主に自分）のために拙い理解で改めて書いておくと、Bootstrapとは有名なCSSフレームワークのうちのひとつです。
そもそもフレームワークとは何かというと、開発に必要な汎用的機能や定義などを利用しやすくまとめたものを指すので、CSSフレームワークってことは、CSSに関していい感じの定義をまとめた定義集ってところだと思います。
例えばBootstrapはTwitter社作成のものですが、主にtwitterなどで使用されている汎用的な定義が含まれたフレームワークですので、使用すると比較的少ない手間で見た目がtwitterっぽいサイトを作れる、ってことです。
基本的にCSSフレームワークはモダンブラウザのみの対応であることが多く、IE8以前などで使い物にならない印象なのですが、古いIEに対してHTML5やCSS3をある程度適用してくれるJSライブラリなどが以前から出回っており、かつIE8以下を切り捨ててもそろそろ大丈夫ではないかという雰囲気がそろそろ業界で一般的になってきたりで、案件によっては使用して問題なさそうな状況が生まれてきました。
そうなってくるとやはりこういうフレームワークは選択肢としてきちんと把握しておくべきで、改めて触ってみたついでに使用法の概要をメモしておきます。
概要
作業の概要としては、サイトからダウンロードしたCSSファイルをアップロードして読み込んで、スタイルを適用させたいタグに、あらかじめ用意されたclassを当てていくだけです。
ダウンロード
まずはBootstrapのサイトから、ファイル一式をダウンロードします。
ファイルは、Bootstrap（コンパイルして使用するだけとなったもの）と、Source code（LESS形式ファイルを含むもの）、Sass（SASS形式ファイルを含むもの）の3種類になっています。
僕は普段SassでCSSを書いてはいますが、自分のCSSとの絡みをやや難しく感じたので、コンパイル済みのものを使用して、追加してスタイルを当てたい場合には別途用意したCSSファイルで上書きをするようにしました。そのほうがコアファイル自体を変えずに済んで、僕のような半素人には安全ですし。
ってことで、一番左のBootstrapをダウンロードしました。
アップロードと読み込み
ダウンロードしたファイルを解凍すると、css、fonts、jsの３つのフォルダができます。コンパイルしたものを使用する場合はこの中身をいじることは無いので、必要に応じて必要なファイルを上げればOKです。僕は、以下の３つをアップしました。
[css]bootstrap.min.css
[js]bootstrap.min.js
[fonts]全て
fontsに関しては、cssから参照して使用するので、全てアップします。
アップしたファイルをHTMLのヘッダ、フッタで読み込みます。
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
基本はこれだけで、あとはHTMLの構造に合わせて適宜classを適当に振ってやれば、スタイルが適用されていい感じになります。
組み込み
ソースは基本的にどのようなものでも問題無いと思いますが、css、jsの読み込み、viewportの指定などが必須です。Bootstrapのサイトに基本のhtmlソースが掲載されていますので、そちらを利用して、必要に応じて追加していくと抜けが無いと思います。
色々なパーツがコンポーネントとしてあらかじめ用意されています。
以下のページにベースのソースと解説が掲載されています。
僕が使用したパーツについて、いくつか書いておきます。
ナビゲーション
基本、ほとんどのパーツについてサンプルソースが掲載されているので、そちらをコピーして改変していく形だと楽に追加できます。
以下は、ヘッダにロゴ、検索窓、ドロップダウンメニューなどを設置する場合の、ヘッダ部分のサンプルソースです。
classで色や位置を指定します。例えば一番外のタグに以下のようにclassを指定すれば、
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
デフォルトの色パターンで、上部固定のナビゲーションバーとなります。
navbar-defaultが色パターン指定で、他には.navbar-inverseがあります。
navbar-fixed-topが位置と挙動の指定で、他に.navbar-fixed-bottom、.navbar-static-topがあります。
上記のように、ある程度の構造に対して対応するclassを振ることで、角パーツの色や配置、挙動などを設定していくイメージです。
ナビゲーションバー中にドロップダウンやフォームなども含まれて居ますが、それらはそれぞれ.dropdown、.form-controlなどのルールに則って記述され、一定のスタイルが適用されています。
ドキュメントを参照して、ルールに沿って記述すればOKです。
グリッドシステム
Bootstrapの肝とも言うべき機能だと思いますが、その要素がどういう挙動をするのかをclassで各要素に指定してやることで、手軽にレスポンシブなグリッド配置を作成することができます。詳細は以下のページを参照ください。
ごくごくカンタンにまとめると、グリッド表示したい要素をラップする要素にまず.rowというclassを振って、内包される各要素に、横幅を12分割した場合の何割を占めるかを意味するclassを定義すれば、その.row内での割合に基づいてグリッド状に配置されます。
また、分割に際しては画面の広さに応じて複数の割合を設定することができます。例えば以下のようなソースの場合、最小画面でそれぞれの要素が横幅いっぱい、次に大きな画面で2分割、次に大きな画面で3分割、最大の画面で4分割という指定になります。
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> </div>
col-XX-nというclass名のうち、XXが画面の大きさ、nが分割する際に占める割合を示します。この情報を元にレスポンシブに要素の横幅が調整されます。例えばcol-md-4の場合、2番目に大きい画面の場合に、4/12の横幅で表示する、という定義と言えます。
画面の大きさはあらかじめ定義されているので、それに従って記述する必要がありあます。
もっと細かい機能や記述法はたくさんあると思いますが、とりあえずそこだけ理解すれば、あとは順次必要に応じて調べながらの実装でよいと思います。
所感
非常に様々な機能があるので逐一書いているときりがないのですが、要は冒頭でも書いたように、cssを読み込んで対応するclassを適宜振っていくという作業が基本となります。今回このブログに実際に適用してみているのですが、カルーセルなどもコンポーネントとして提供されており、簡易なものながらとても楽に実装できました。
すごくざっくりとですが使ってみた感想として、昨今の、HTMLとCSSをなるべく分離して装飾をCSSのみで行うタイプのサイト作成にとても便利だと思いました。パーツにclassでデザインを適用していけば、ある程度統一感のある見た目になるし、コーディングルール的にもなんとなく整理されるように思いました。
まあそんなことは数年前から使ってる方々はとっくにご存知のことと思いますが、これからはこういったフレームワークを使った工数の軽減などは一般的になってくるような気もしますので、まだ触ったことのない方はぜひ一度自分のブログなりをこういったフレームワークで実装してみることをオススメします。