超便利！Twitter BootstrapでさくさくWeb開発
新年度です！
新入学、新入社を迎えるみなさん、おめでとうございます。
エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？
カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実 は私もそうでした。
ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！
Twitter Bootstrapとはなにか
Twitter Bootstrap
CSSのフレームワークです。
Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。
今回ご説明しているのは、Twitter Bootstrap 2についてです。
サイトにTwitter Bootstrapを導入しよう！
一番簡単な導入方法は、CSSをダウンロードして設置するだけです！
公式サイトのデカ白ボタン「Download Bootstrap」をクリックし、zipファイルをダウンロードしましょう。
解凍してできたcss、img、jsのディレクトリごと設置します。
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
bootstrap.jsは、BootstrapのJavascriptプラグインを含んでいるjsファイルです。
プラグインを読み込むと、モーダルウィンドウやドロップダウン、タブといった動きのあるコンポーネントを簡単に表現することができます。
jqueryに依存しているので、jquery→bootstrap.jsの順で読み込みましょう。
bootstrap.jsのように、すべてのコンポーネントをまとめたものではなく、個別のコンポーネントで良い！という場合は、
一覧ページ（http://twitter.github.com/bootstrap/javascript.html）から好きなコンポーネントのjsファイルをダウンロードしてください。
レイアウト
Twitter Bootstrapが提供しているレイアウトは、大きくわけて二つです。
固定幅レイアウト：940pxからなる固定幅レイアウトです。
流動幅レイアウト：画面のサイズに併せて流動的なサイズになるレイアウトです。
これらをコンテナと呼びましょう。
コンテナの中に、ボックスを置くようにコンテンツを置きたい場合があります。そこで使うのがgridです。
グリッドは横幅を12個に分割しており、span1〜span12で表します。
上記の例だと、span4とspan8、4:8のグリッド領域がわかると思います。
Hello, world!のグリッド領域がspan12なので、どのように分かれているかわかりやすいですね。
それぞれのレイアウトでグリッドを使うと、下記のようになります。
・固定幅レイアウト
<div class="container">
<div class="row">
<div class="span4">
Span4の中身
</div>
<div class="span8">
Span8の中身
</div>
</div>
</div>
・流動幅レイアウト
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
Span4の中身
</div>
<div class="span8">
Span8の中身
</div>
</div>
</div>
Preタグで囲むコード
エンジニアの皆さんなら、ブログにコードを書きたいですよね。
Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。
・codeタグで囲む
赤くなります。
・preタグで囲む
囲み枠がつき、灰色になります。
・Preタグ+Google Prettifyを使う
preタグのclassに、prettyprint linenums を入れましょう。
これが超かっこいい！！コードを見せるならこれがよさそうですね！
さ て、かっこいいGoogle Prettifyですが、こちら、ちょっと頑張らないとかっこ良くならないようです。
ここからGoogle Code Prettifyのjsファイルをダウンロードします。
http://code.google.com/p/google-code-prettify/
そして、このCSSを保存し、JSと共に読み込んで下さい。
.com {
color: #93A1A1;
}
.lit {
color: #195F91;
}
.pun, .opn, .clo {
color: #93A1A1;
}
.fun {
color: #DC322F;
}
.str, .atv {
color: #DD1144;
}
.kwd, .linenums .tag {
color: #1E347B;
}
.typ, .atn, .dec, .var {
color: teal;
}
.pln {
color: #48484C;
}
.prettyprint {
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
padding: 8px;
}
.prettyprint.linenums {
box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
}
ol.linenums {
margin: 0 0 0 33px;
}
ol.linenums li {
color: #BEBEC5;
line-height: 18px;
padding-left: 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
どうやら、Google Codeのバージ ョンが上がったか何かで、Twitter Bootstrapの思う通りに表示されないようです。
（上記のCSSは、Twitter Bootstrapの公式サイトがローカルから読み込んでいるものと同じ内容です。）
テーブル
クラスを付けない状態だと罫線が表示されませんが、クラスをつけることによって、5種類のスタイルを利用できます。
1: table
行ごとに下線が引かれます。
2: table table-striped
行ごとに下線が引かれたうえに、偶数行に背景色がつきます。
3: table table-bordered
テーブルのセルに全て線が入ります。テーブル自体は角丸になります。
4: table table-condensed
tableよりも、無駄な余白が少なくなります。
5: table table-striped table-bordered table-condensed
上記の全部入り！
フォーム
フォームはさまざまなプロパティがあるので、ここで説明するよりも公式サイトを見たほうが早いかと思います。
spanでinputタグの幅を指定できたり、フォーカスが当たると青い影がついたり、とても便利です。
ボタン、ラベル
inputタグとaタグは、btnというクラスを付加するだけで簡単にきれいなボタンになります。
画像を使わずにこのボタンが表現できるのは嬉しいですね！
大きさも3種類、色も場面によって使い分けられます。
ラベルはボタンクラスの「btn」を「label」と読み替えるだけ で作成できます。親戚のようなかんじです。
アイコン
iタグにアイコン名を指定するだけで、かわいいアイコンを全部使うことができます！
解答したbootstrapの画像ディレクトリに、2つの画像が入っていたと思います。これは、黒いアイコンの画像集と白抜きアイコンの画像集です。
これらのアイコンは、ボタンなどと組み合わせて使うことができます。
背景が暗めのボタンでは白抜きのアイコンを使うよう、CSSで指定できます。
<a class="btn"><i class="icon-pencil"></i> 黒いアイコンを使うとき</a>
<a class="btn btn-primary"><i class="icon-pencil icon-white"></a> 白抜きアイコンを使うとき</a>
アラートボックス
divタグにクラスalertをつけると、アラートメッセージが出せるようになります。
色は4種類あり、黄色以外のボックスにするには、alertとalert-successなど、色に対応したクラスを一緒に付与します 。
ひな形がほしい！
公式サイトに、ベーシックな3種類の型が置いてあります。
http://twitter.github.com/bootstrap/examples.html
色を変えたい！
このサイトから、好きな色を探してみては？
http://bootswatch.com/
Twitter BootstrapではLESSを採用しており、自分で好きな色を決めてコンパイルすることも可能ですが、ちょっと面倒ですよね。
このサイトで、細かく色を決めるのはどうでしょうか？
http://stylebootstrap.info/
公式でも、カスタマイズしたcssをダウンロードすることができます。
http://twitter.github.com/bootstrap/download.html
はじめは少々戸惑うかもしれませんが、慣れれば心強いCSSフレームワーク。
Twitter bootstrapを使ってどんどんWebアプリケーションを作って下さい！
