Bootstrapでドロップダウンメニューを作成する

Bootstrapを利用すると、簡単にドロップダウンメニューを作成にすることができます。
参考ページ：Dropdowns

１．ドロップダウンするテキストにdata-toggle=”dropdown”を追加
２．表示するメニューリスト（ul）にclass=”dropdown-menu”を追加
３．これらを囲うdivタグ等にclass=”dropdown”を追加（※これを追加しない場合、メニューが変な場所に表示される可能性があります）

<div class="dropdown">
	<a href="#" data-toggle="dropdown">ドロップダウン</a>
	<ul class="dropdown-menu">
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</div>

ドロップダウンをボタンにすることもできます。
ボタン横に▼（キャレット）を表示することもできます。

<b class="caret"></b>

<div class="dropdown">
	<button href="#" class="btn btn-defualt" data-toggle="dropdown">ドロップダウン<b class="caret"></b></button>
	<ul class="dropdown-menu">
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</div>

※BootstrapサイトのDropdownsにある最初のサンプルをそのまま利用しても表示されません。表示したいときは、buttonのクラスにある”sr-only”を削除すると表示されます。