Bootstrapでファイルアップロード

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Twitter Bootstrap3.0(TB3.0)の登場で、作っていたWebミニプログラムであるお知らせ更新プログラムをバージョンアップさせてみました。
ファイルのアップロードをAjaxにしてみたり、アップロードファイル数も自由に変更できるようにしてみたり、設定画面で変更できる項目を整理したりしました。
まぁ、このプログラムは公開していないので、説明してもアレなのですが・・・w

そんなこんなでTB3.0を色々触っていて思ったのですが、以前ファイルアップロードの見た目をTBっぽくするTipsみたいなのをご紹介していたのですが、実はこれがIEでは動かないことがありました・・・orz
(紹介していたときはIEでも動作確認したと思ったんだけどなぁ・・・)

そこで、TBを使ってもっと見た目を良くできないか、しかもクロスブラウザ対応にできないかと色々水面下で考えていたのですが、ふとTB3.0のサイトでGlyphiconsを眺めていてちょっとしたひらめきをしました。

TBの「input-group」と「glyphicons」を使うだけで、それっぽくみえるんじゃね?

ということで、

これだけで、ちょっとオサレなんじゃないの?
ちょっと各ブラウザで確認。

Google ChromeのデザインWin版 Google Chrome 29

IE10のデザインWin版 Internet Explorer 10

FireFoxのデザインWin版 FireFox 24

OPERAのデザインWin版 Opera 12

SafariのデザインWin版 Safari 5

おぉ、Safariだけ残念な見え方だけど、それ以外はなんとなくそれっぽく見えてるじゃん!!
個人的にはIEの見え方が一番好きだけど、とりあえず、これで良しとするか!

でも、GlyphiconsなのになぜSafariではクリップマークが見えないのだろう・・・

と思ったら、TB公式サイトに

Safari (Mac and iOS only, as Windows has more or less been discontinued)
(サファリはMacとiOSだけだよ。だって、Windows版は更新とまってんじゃん)的な・・・

と書いてありました。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。