基本的なドロップダウン
ドロップダウンメニューは、ユーザーが事前に定義されたリストから値を選択することを可能にするトグルメニューです。
例
<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> »それを自分で試してみてください 例の説明しました
.dropdownクラスは、ドロップダウンメニューを示しています。
ドロップダウンメニューを開くには、ボタンまたはのクラスとのリンクを使用.dropdown-toggleおよびdata-toggle="dropdown"属性を。
.caretクラスは、キャレット矢印アイコンを作成します( ) ( ) ( ) 、ボタン、ドロップダウンであることを示しています。
追加.dropdown-menuにクラスを<ul>実際にドロップダウンメニューを構築するための要素。
ドロップダウンディバイダ
.dividerクラスは、細い水平境界線を持つドロップダウンメニュー内部の個別のリンクに使用されます。
ドロップダウンヘッダー
.dropdown-headerクラスは、ドロップダウンメニューの内部ヘッダを追加するために使用されます。
項目を無効にします
ドロップダウンメニュー内の項目を無効にするには、使用.disabledクラス：
ドロップダウンポジション
追加、ドロップダウンを右揃え.dropdown-menu-right .dropdownメニューを持つ要素にクラスを：
Dropup
あなたがドロップダウンメニューには、代わりに下向きの上方に拡大変更する場合<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> »それを自分で試してみてください 練習で自分自身をテスト！
ブートストラップドロップダウン・リファレンスを完了
すべてのドロップダウンオプション、メソッドおよびイベントの完全なリファレンスについては、当社に行くブートストラップJSドロップダウンリファレンス 。