*

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

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

YAMAHA MG10UXミキサー到着

2018年 物置(事務所or作業場or遊び部屋)の一角を音声収録&撮影

そしてzbrush coreをインストールしてみる話

Blenderに挫折してから一気に3Dにのめり込んでいます。 ま

録音環境を改善する!吸音パネルをDIYとか

久々に更新! すっかり更新グセが抜けてしまい、イマイチやる気が出

CeVIO Creative StudioがMacのWin10で認証失敗

久しぶりに更新できました。 この時期は寒くて...と言い訳から入

xismoを使ってみて覚えたところと謎なところ(追記あり)

謎と言っても私の理解が足りないだけなんですけどね^^; 一応私の

→もっと見る




  •  

PAGE TOP ↑