*

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で修正するテクニックは見つ

記事を読む

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

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

記事を読む

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

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

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

激安中華な Bluetooth 5.0 イヤホンを買ってみたけど便利ね

前から気になっていた Bluetooth 5.0 イヤホン。 耳

2018年に購入したもので最も良かったものはミニスライダー

あけまして おめでとうございます 2019年 第一発目にご紹介す

Final Cut Pro X 用の無料 Calloutsプラグイン13種&12種がいい感じ

すっかり Final Cut ネタが続きますが皆様いかがお過ごしでしょ

Final Cut Pro X用 無料のオススメプラグイン = SliceX Free を試してみた

Final Cut Pro Xを使っていて一番不満なのがトラッキング関

WIGGLE TEXT – ブルブル震える文字をファイナルカットで作る

みんな大好きブルブル振動。 そこで今回はファイナルカットで出来る

→もっと見る




  •  

PAGE TOP ↑