twitter bootstrap

twitter bootstrapを使い始めるときに、覚えておくべき最小限の使い方。

（以下は、twitter bootstrap V2.0を前提にしている。解説するのは、とりあえず、railsのscaffoldの表示をかっこ良く置き換えるの必要な機能だけの覚書。また、下記は、特にフレームワーク等を使っていない場合の方法。なんらかのフレームワークを使っている場合は、もっと使いやすい方法が用意されていることが多い。一応、rails3の場合については、各項目ごとに記した。twitter-bootstrap-railsも参照のこと。）

使い方。

１，twitter bootstrapを公式サイトからダウンロードしておく(rails3の場合、twitter-bootstrap-railsとかみたいなgemを使うほうが楽だと思う)。
２，htmlファイルのヘッダに以下のソースを組み込む。(rails3で、なんらかのgemを使ってインストールした場合、asset pipelineが勝手にうまく計らってくれるので、このステップと次のステップは不要)

sapmle for twitter bootstrap

bootstrapを解凍すると入っているCSSファイルには、bootstrap.min.css, bootstrap.css, bootstrap-responsive.min.css, bootstrap-responsive.cssの4種類がある。minとついているのは、小さいファイル。ただし、機能の違いはない。minと付いている方を使おう。responsiveとついていないものだけでも最低限の機能はあるが、responsiveとついているものも一緒に読み込むことで、ブラウザの幅に応じて適当に対応してくれる。とりあえずの簡単スマホ対応になるので、使っておこう。

３，bodyの一番下に、以下のソースを入れておく。（上で書いたように、rails3の場合、これはしなくていい。）

bootstrap.min.jsは、このCSSで必要なJavascriptファイル。こいつの動作は、jqueryに依存しているので、jqueryも一緒に読み込んでおく。1.7.1は、この項目を書いた時点での最新版。

４，レイアウトは、containerを使う。
これだけで、それなりに綺麗なレイアウトにしてくれる。グリッドとかは、あとで適当に。

この中に、コンテンツをかく。

５，formをつかう。
formは、ただ書くだけで、それなりに綺麗にしてくれる。ただし、ボタンだけは、class="btn"とつけること。

名前

６，pagination
paginationはこんな感じ（このステップで書いているpaginationのhtmlは、railsでwill_paginateを使ってpaginationをした場合、作るのが面倒くさい。will_paginateを使うなら、この項目は無視するのも一方だと思う。kaminariを使った場合は、kaminariという名前のgemがあったはず。それを使うと、kaminariのテーマをbootstrap風にできる。参考：http://d.hatena.ne.jp/Naruhodius/20120113/... ）。