Twitter Bootstrap3.0(TB3.0)の登場で、作っていたWebミニプログラムであるお知らせ更新プログラムをバージョンアップさせてみました。
ファイルのアップロードをAjaxにしてみたり、アップロードファイル数も自由に変更できるようにしてみたり、設定画面で変更できる項目を整理したりしました。
まぁ、このプログラムは公開していないので、説明してもアレなのですが・・・w
そんなこんなでTB3.0を色々触っていて思ったのですが、以前ファイルアップロードの見た目をTBっぽくするTipsみたいなのをご紹介していたのですが、実はこれがIEでは動かないことがありました・・・orz
(紹介していたときはIEでも動作確認したと思ったんだけどなぁ・・・)
そこで、TBを使ってもっと見た目を良くできないか、しかもクロスブラウザ対応にできないかと色々水面下で考えていたのですが、ふとTB3.0のサイトでGlyphiconsを眺めていてちょっとしたひらめきをしました。
TBの「input-group」と「glyphicons」を使うだけで、それっぽくみえるんじゃね?
ということで、
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-paperclip"></span></i> <input type="file" name="photo" id="photo" class="form-control"> </div>
これだけで、ちょっとオサレなんじゃないの?
ちょっと各ブラウザで確認。
Win版 Google Chrome 29
Win版 Internet Explorer 10
Win版 FireFox 24
Win版 Opera 12
Win版 Safari 5
おぉ、Safariだけ残念な見え方だけど、それ以外はなんとなくそれっぽく見えてるじゃん!!
個人的にはIEの見え方が一番好きだけど、とりあえず、これで良しとするか!
でも、GlyphiconsなのになぜSafariではクリップマークが見えないのだろう・・・
と思ったら、TB公式サイトに
Safari (Mac and iOS only, as Windows has more or less been discontinued)
(サファリはMacとiOSだけだよ。だって、Windows版は更新とまってんじゃん)的な・・・
と書いてありました。