Twitter Bootstrapのファイルアップロードをカッコよくする!

bootstrapで、ファイルのアップロードのタグを設定したら、デフォルトのボタンとかが出てきて非常にダサいです。いい方法がないかなー?と思って探していたところ、bootstrapをフォークしたと思われるかっこいいライブラリがありました。

それが、Jasny Bootstrapです。

これの、Javascriptのところから、File Uploadを選びましょう。
リンクはこちら

ファイルを選択するためのボタンがbootstrap風になってますね。
Javascript · Jasny Bootstrap

これが、ファイルを選択したら、カッコいい感じになります。変更や削除にも対応していてイカス!
Javascript · Jasny Bootstrap-1

画像のプレビューに対応しているタイプも揃っています。
以下はプレーンなやつ。
Javascript · Jasny Bootstrap-2

これはNo Imageがついているやつ。いいですねぇ!
Javascript · Jasny Bootstrap-3

これはユーザーアイコン用?
Javascript · Jasny Bootstrap-4

導入はこのページのダウンロードボタンから、zipをダウンロードして入れて、決まった形式で記述するだけです。
bootstrapだけでは手の届いていない部分をやってくれていて非常にありがたいですね!!


カテゴリー CSS, JavaScript | タグ | パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です