読者です 読者をやめる 読者になる 読者になる

ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

BootStrap のセレクトボックスを格好良くする メモ

BootStrap

BootStrapでフォームにデザインあてると、セレクトボックスがデフォルトのままで
他のフォーム部品と同じようなデザインに出来ないかなと思って調べた時のメモです。

使用ライブラリ

Bootstrap-select

変更前と変更後

f:id:buzzword111:20140318135825j:plain

使用方法

前提として、jQueryが必要。

公式サイトにて、ライブラリをダウンロード。

その中から

・bootstrap-select.css or bootstrap-select.min.css
・bootstrap-select.js or bootstrap-select.min.js

コピーして使用したいHTMLページに読む込むようにする。

<link rel="stylesheet" type="text/css" href="./bootstrap-select.css">
<script src="./bootstrap-select.js"></script>

次に、スクリプトを追加

<script type="text/javascript">
        $(window).on('load', function () {
            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });
        });
</script>


上記のような使用準備が済んだら、セレクトボックスのclassにselectpickerとすると格好良くなる^ー^

<select class="selectpicker">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

f:id:buzzword111:20140318141638j:plain