Bootstrap の新しいバージョン３がお試し公開中

Mobile first な Bootstrap 3 RC1 が出てる。RC版なので本格稼働には向かないが、どこが変わっているのか期待しながら試してみます。

Bootstrap
http://getbootstrap.com/

ダウンロードするとbs-v3.0.0-rc1-dist.zipが出てくるので解凍。「dist」というファルダがひとつ、中には「css」と「js」ふたつのフォルダ。「css」の中には「bootstrap.css」と「bootstrap.min.css」二つのファイル。「js」の中には「bootstrap.min.js」と「bootstrap.min.js」二つのファイル。すごくシンプルになった感じです。

最初にサンプルをチェックしてみます。
http://examples.getbootstrap.com/

gridの隙間が無くなった？画面上部のメニューが増えたというのが第一印象です。

中身をざっと確認すると、どうやら流行りのフラットデザイン？

相変わらず全体の行間隔が狭いのとテーブルデザインが貧弱なのは残念です。タイトルの装飾はシンプル系の海外風なのは諦めるとしても、もう少し頑張って欲しかったというのが本音。

ちょっと目を引いたのがアイコン。
http://glyphicons.getbootstrap.com/

ダウンロードして解凍すると中身は色々入ってます。

ここにもサンプルらしきものがいくつかあります。
http://expo.getbootstrap.com/

Custom contentやPanel、With list groupsあたりのデザインが良い感じです。古いバージョンからの載せ替えはちょっと面倒みたいですね。

試してみる

サンプルの「Justified nav」を表示してソースをゲット。試しに調整して表示の確認をしてみました。「justified-nav.css」を別途用意しておかないと行けないようですが、以下のURLにあったのでもらってきてセットします。cssへのリンクをセットしたフォルダに合わせて書き換えるだけで使えます。

Justified nav
http://examples.getbootstrap.com/justified-nav/index.html

justified-nav.css
https://github.com/twbs/bootstrap-examples/blob/master/justified-nav/justified-nav.css

なんか表示が変です。もうしばらくしないと安定しないのかな？