レスポンシブ対応のシンプルだけどクールなカレンダータイプの日付入力JQuery
pickadate.js
Bootstrap アイコン
Bootstrapは標準で140のアイコンが簡単な指定で表示できます。
黒のアイコンなら <i class=”icon-arrow-up“></i>
白のアイコンなら <i class=”icon-arrow-up icon-white“></i>
の赤字のそれぞれ入れればOKで簡単です。
さらに多くのアイコンを使用したい場合に2つのサイトを紹介します。
■Elusive Icons
271のアイコンがあります。
http://aristath.github.com/elusive-iconfont/
■Font Awesome
249のアイコンがあります。
設置方法:ダウンロードした中のCSS「font-awesome.min.css」と「font-awesome-ie7.min.css」をCSSフォルダーに入れる。
「font」フォルダーをそのまま、index.htmlと同じ階層にそのまま入れる。
index.htmlに下記の記述を追加する。
<link href=”css/font-awesome.min.css” rel=”stylesheet”>
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/font-awesome-ie7.min.css“>
<![endif]–>
赤字は置いてある場所を確認して変更する。
後は使用したいアイコンをそれぞれ指定をする。
<p><i class=”icon-camera-retro“></i> icon-camera-retro</p>
<p><i class=”icon-circle-arrow-down icon-large“></i> icon-circle-down</p>
<p><i class=”icon-circle-arrow-right icon-2x“></i> icon-circle-right</p>
<p><i class=”icon-circle-arrow-left icon-3x“></i> icon-circle-left</p>
<p><a href=”#t”><i class=”icon-circle-arrow-up icon-4x“></i> icon-circle-arrow-up</a></p>
<p><i class=”icon-spinner icon-large icon-spin“></i> Spinner icon</p>
サイズを変更なら「icon-large、icon-2x、icon-3x、icon-4x」
回転させるなら「icon-spin」
をスペースの後に追加する。
ウェブセーフカラー表
WindowsとMacintoshではカラーが違って見えたりします。またもともと標準としている色数や解像度による色数も違うのでネットではセーフカラー256色というものがあります。
この色を使っていると殆どの環境で同じ色で再現されます。フォトショップやドリームウィーバーなどは簡単に色指定ができますが、実際のブラウザで前後の濃淡など確認することができるサイトがあります。
さらに便利なのが右上のメニューから「216 Web Safe Colors」「Greens / Blues」「Reds / Blues」「Reds / Greens」「Earth Tones」「Pastels」「Greys」とそれぞれ選択してくれます。
Bootstrapシンプルテキストエディター
Bootstrap用のシンプルな無料テキストエディター
bootstrap-wysihtml5
http://jhollingworth.github.com/bootstrap-wysihtml5/
Bootstrap用のシンプルなjQueryカラーピッカー
Bootstrapで使用可能なシンプルなGoogleカレンダーのようなjQueryカラーピッカー。
とても短いコードで実現できます。
jquery-simplecolorpicker
https://github.com/tkrotoff/jquery-simplecolorpicker
Bootstrap用のカラーピッカーとカレンダー
Bootstrapでよく使用されているカラーピッカーとカレンダー機能です。
Colorpicker and Datepicker for Twitter Bootstrap
http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm
BootstrapでボタンのHTML設定を簡単に作る
Bootstrapのボタン設定をする時にいつもはベースサイトを見たり、サンプルを見たりして行うが、
このサイトを使うと簡単に指定のHTMLが作れます。
Twitter Bootstrap Button Generator
http://www.plugolabs.com/twitter-bootstrap-button-generator/
Bootstrapでボタンをカスタムカラーで作れる
Bootstrapのボタンをオリジナルカラーで作る場合に便利なサイト。
カラーをスライドバーで設定しながら実際にそのカラーで見れる。
Beautiful Buttons for Twitter Bootstrappers
http://charliepark.org/bootstrap_buttons/