*

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

公開日: : 最終更新日:2013/08/08 WEBDESIGN

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

Bootstrap
http://getbootstrap.com/

スクリーンショット 2013-08-06 22.24.32 2

ダウンロードすると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/
スクリーンショット 2013-08-06 22.33.18

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

スクリーンショット 2013-08-06 22.35.20

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

スクリーンショット 2013-08-06 22.37.02

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

スクリーンショット 2013-08-06 22.42.13

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

スクリーンショット 2013-08-06 22.42.21

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

スクリーンショット 2013-08-06 22.46.00

ここにもサンプルらしきものがいくつかあります。
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

スクリーンショット 2013-08-06 23.00.09

スクリーンショット 2013-08-06 23.00.19

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


Sponsored Link


 
 

関連記事

BootstrapでGoogle map や Youtbeを貼る方法(iFrame)

よく探したらスグに見つかったのでメモしておきます。BootstrapでiFrameを綺麗に連動させる

記事を読む

BootstrapでGoogle マップを貼る方法がわかりません

Bootstrap google map で検索すると、表示の乱れをCSSで修正するテクニックは見つ

記事を読む

FL Studio サイドチェインでワウワウ言わせる(2)

FL Studio での Side chain の方法。今回はリミッター編です。第一回目のサイドチェ

記事を読む

素晴らしいブログが多いけど書籍に負けてるんじゃないかと

毎日のように素晴らしい記事を発見しています。特にブログの情報量にはホント驚かされます。しかし本を買う

記事を読む

Bootstrapでホームページを作ってみて気がついたメモ

簡単にレスポンシブデザインできる Bootstrap を使ってみて、気がついた点をメモしています。実

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑