最近よく耳にするようになったBootstrapをインストールしてみました。
Bootstrap
BootstrapはHTML、CSS、Javascriptをベースとしたフレームワークで、活用することでコーディング作業を軽減することができます。
これまで、クロスブラウザのために、reset cssやjQueryなどのベースライブラリが開発されてきましたが、こられのしくみをまとめて、パッケージ化したものと考えればイメージしやすいかもしれません。（jQueryについてはBootstrap導入に必須です）
Bootstrapを活用して開発を進めれば、レスポンシブ対応も可能で、iPhoneやAndroidのモバイル端末、iPadなどのタブレット用のサイト対応もコストを抑えることができます。
Bootstrapをインストール
冒頭の公式サイトからBootstrapをダウンロードします。現時点での最新版は「ver 3.2.0」です。
ダウンロードしたファイルを展開し、以下の2ファイルを読み込みます。
<link rel="stylesheet" href="/css/bootstrap.min.css"> <script src="/js/bootstrap.min.js"></script>
以下のようにCDNも用意されているので、常に最新のライブラリを読み込むこともできますが、外部サーバのレスポンスという観点からも、私としては前者でセットしています。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
ちなみに、公式サイトにもありますが、jQueryが必要なこと、モバイル対応のmeta情報、html5 + CSS3に一部対応していないIE8、IE9用のコード、これらをまとめると以下のようなベースHTMLになります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="/js/html5shiv.min.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="/js/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> </body> </html>
「html5shiv.min.css」「respond.min.js」については別途用意します。
インストールは以上です。簡単ですね。
サイトを構築
インストールが完了したら、公式サイトの「CSS」「Components」「JavaScript」ページやサンプルを参考にコーディングを進めるだけです。
Bootstrapだけでもある程度体裁が整えることができるので、運用できるレベルのサイトを簡単に構築できます。
後は、必要に応じて自分好みのデザインにあわせてスタイルをカスタマイズするだけです。
がっつりカスタマイズすれば、一見、Bootstrapを思わせないようなデザイン性の高いサイトを構築することもできますが、慣れないと難しいかもしれませんね。
早速ですが、このブログを実験台に導入してみました。
。。。特に変化なし。そりゃそうですよね。フレームワークなので、そのルールで構成しなければ反映されません。逆に、既存のサイトに差し込んでもほとんど変化なし、崩れないというのも驚きです。それだけしっかり設計されてるんですね。
さて、Bootstrapには、いくつものテーマが開発されていて、Bootstrap + αを導入することで、手軽に○○風なサイトを仕上げることができます。
Fbootstrapp（Facebook風）
http://ckrack.github.io/fbootstrapp/
Twitter Bootstrap（Twitter風）
http://getbootstrap.com/2.3.2/
TODC Bootstrap（Google風）
http://todc.github.io/todc-bootstrap/
このように多くのテンプレートが開発されています。
さて、このサイトは何風にしようかな
コメントする