Twitter Bootstrap 3 RC1 モバイルファーストでフラットデザイン

大人気のフロントエンド用のフレームワークTwitter Bootstrapの3rc1がリリースされました。
スマートフォンやタブレットでの利用を優先し、フラットなデザインに生まれ変わりました。
ディスクトップ用には2.x系が使いやすい印象を受けました。

Twitter Bootstrap 3 RC1

Twitter Bootstrap 3 RC1

最初に利用するテンプレートはこちらから。

http://getbootstrap.com/getting-started/#examples

Template Examples

CDN

CDN(Contents Delivery Network)も用意されており、cssとjsのみ読み込めば使えます。
icon系はダウンロードファイルに含まれませんので、これだけでＯＫです。

&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css&quot;&gt;

&lt;!-- Optional theme --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css&quot;&gt;

&lt;!-- JavaScript plugins (requires jQuery) jQueryの読込は必須です。 --&gt;
&lt;script src=&quot;http://code.jquery.com/jquery.js&quot;&gt;&lt;/script&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src=&quot;//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

Grid System

グリッドシステム部分はクラスの内容がガラッと変わった印象があります。

Grid System

Migrating from 2.x to 3.0

2.x系から3.0への代表的なクラスが変更になっており、対応表が載っております。

http://getbootstrap.com/getting-started/#migration

Migrating from 2.x to 3.0

追加されたクラス

リストグループとパネルが追加されています。

リスト系

http://getbootstrap.com/components/#list-group

リスト系

パネル系

http://getbootstrap.com/components/#panels

パネル系

Twitter Bootstrap 2.x

2.x系も残っております。
Looking for Bootstrap 2.3.2 docs

Twitter Bootstrap 2.3.2

ディスクトップ用には2.x系を使い続けるのもありかと思う反面、モバイル対応という課題をどう受け取るか悩みどころです。
使いなれているクラスが変わるとなんだか違和感もあり、慣れるまでは少し時間がかかるかも。
web全体の1%が利用しているというデータもあるらしく、慣れないことには始まりません。
どちらにしても使い勝手が良いフレームワークなので、楽しんで使えれば良いと思います。