だるろぐ

明日できることは、今日しない。

Twitter Bootstrap を v2.0 にしてみた

Twitterは1月31日、CSS/HTMLフレームワーク「Bootstrap 2.0」をリリースしたと発表した。画面を格子状に分割して要素を配置する「グリッドレイアウト」を容易に実装できるほか、WebサイトやWebアプリケーション開発に向けたUIコンポーネントが多く含まれている。

米Twitter、同社発のCSS/HTMLフレームワーク「Bootstrap 2.0」を公開 - SourceForge.JP Magazine : オープンソースの話題満載

ちょっと様子見していたのだけど、サクっと乗り換えてみた。

f:id:daruyanagi:20120218234116p:plain

ドロップダウンメニューやタブが動かなくなった \(^o^)/

結構色々変わっていて、後方互換性はないみたい。既存のビューを書き換えるのには、多少苦労した。

Bootstrap 2.0では、ボタン、ボタングループ、ドロップダウン、タブなどのコンポーネントが書き直されている。また、グリッドシステムではカラムの数が16から12カラムとなり、画面の大きさなどに応じて柔軟に調整するレスポンシブアプローチを導入スマートフォン、タブレットなどへの対応が強化された。

 フォームスタイルも一新され、jQuery UIなどのツールとの互換性を強化した新しいテーブルスタイルも用意された。Collapse、Crousel、TypeaheadなどのJavaScriptプラグインも加わっている。必要な機能を選んで利用するカスタマイズ版も新たに用意された。

とくにカラム数の変更は......描き直しが面倒くさい。ドロップダウンメニューのデザインは新しいほうが格好いいな。しかし、@Html.EditorFor() ではHTMLタグの属性を指定できないんだなぁ。クラス名がないと、ちゃんとデザインしてくれないのでこまる。とりあえず、JavaScript で後からチョコチョコッとクラスをつけておいた。

$(function () {
    $('form').addClass("form-horizontal");
    $('label').addClass("control-label");
    $('input').addClass("input-xlarge");
    $('textarea').addClass("input-xlarge");
});

なお、Twitter Bootstrap は、Visual Studio/WebMatrix ならば Nuget で簡単にインストールできる(プラグインは含まれていない)。ダウンロード&配置の手間が少しだけ省けるので試すべし。

f:id:daruyanagi:20120218234746p:plainf:id:daruyanagi:20120218234748p:plain