ドロップダウンメニューは、ユーザが定義済みリストから 1 つの値を選ぶことができるトグルメニューです：
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Try it Yourself »
.dropdown クラスは、ドロップダウンメニューを示します。
ドロップダウンメニューを開くには、ボタンか .dropdown-toggle クラスと
data-toggle="dropdown" 属性を持つリンクを使用します。
.caret クラスは、ボタンがドロップダウンであることを示すキャレット矢印アイコン
（）を作成します。
実際に、ドロップダウンメニューを作成するために、<ul> 要素に
.dropdown-menu クラスを追加します。
.divider クラスは、ドロップダウンメニュー内のリンクを薄い横罫線で区切るために使用します：
.dropdown-header クラスは、ドロップダウンメニュー内にヘッダを追加するために使用します：
ドロップダウンメニュー内の項目を無効にするには .disabled クラスを使用します：
ドロップダウンを右揃えにするには、.dropdown-menu を持つ要素に
.dropdown-menu-right クラスを追加します：
下方の代わりに上方に伸びるドロップダウン・メニューにしたい場合は、<div> 要素の
class="dropdown" を "dropup" に変更します：
ドロップダウンメニューを作成するときに、スクリーンリーダを使用している人のアクセシビリティを改善するには、
次の role と aria-* をインクルードする必要があります：
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
すべてのドロップダウン・オプション、メソッド、イベントの完全なリファレンスについては、 Bootstrap JS ドロップダウン・リファレンスをご覧ください。