Bootstrap-selectでセレクトボタンもスタイリッシュに

Bootstrapを利用するとそれだけでかなりフォームデザインがよくなるものの、セレクトボックスはほぼデフォルトのままでいまいちです。別途、Bootstrap-selectというライブラリを追加することで、スタイリッシュなセレクトボックスにしてくれます。

使い方

Bootstrap-selectを公式サイトよりダウンロードし、下記ファイルをHTMLから読み込むようにします。

• "bootstrap-select.css"　or "bootstrap-select.min.css"
• "bootstrap-select.js" or "bootstrap-select.min.js"

また、jQueryで動作することが前提ですので、jQueryもダウンロードし、読み込みます。

Code1は"bootstrap-select.css"を"css"フォルダに、"bootstrap-select.js"と"jquery.js"を"js"フォルダに配置した場合の例です。

また、ダウンロードしたり、フォルダ配置とか面倒だという場合はCDNを利用したロードも可能です。(CDNを使う目的は本来別ですが)適当なCDNを探してリンクします。