bootstrap

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

この記事は2013年8月7日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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

Twitter Bootstrap 3 RC1

http://getbootstrap.com/
Twitter Bootstrap 3 RC1

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

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

CDN

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- JavaScript plugins (requires jQuery) jQueryの読込は必須です。 -->
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Grid System

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

http://getbootstrap.com/css/#grid
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

http://getbootstrap.com/2.3.2/
Twitter Bootstrap 2.3.2

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

  • このエントリーをはてなブックマークに追加

PAGE TOP