html5

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

Posted 8月 7 2013 by Teachers  ,

大人気のフロントエンド用のフレームワーク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%が利用しているというデータもあるらしく、慣れないことには始まりません。
どちらにしても使い勝手が良いフレームワークなので、楽しんで使えれば良いと思います。


Bootstrap HTML5 Twitter Bootstrap



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。