ブートストラップドロップダウン

基本的なドロップダウン

ドロップダウンメニューは、ユーザーが事前定義されたリストから1つの値を選択できるようにする切り替え可能なメニューです。

例の説明

.dropdownクラスはドロップダウンメニューを示します。

.dropdown-toggleドロップダウンメニューを開くには、のクラスと data-toggle="dropdown"属性を持つボタンまたはリンクを使用します。

クラスは.caretキャレット矢印アイコンを作成します（）、これはボタンがドロップダウンであることを示します。

.dropdown-menuクラスを要素に追加して、<ul>実際にドロップダウンメニューを作成します。

ドロップダウンディバイダー

この.dividerクラスは、ドロップダウンメニュー内のリンクを細い水平方向の境界線で区切るために使用されます。

ドロップダウンヘッダー

この.dropdown-headerクラスは、ドロップダウンメニュー内にヘッダーを追加するために使用されます。

無効アイテムとアクティブアイテム

.activeクラスで特定のドロップダウンアイテムを強調表示します（青色の背景色を追加します）。

ドロップダウンメニューの項目を無効にするには、.disabledクラスを使用します（明るい灰色のテキストの色と、ホバー時に「駐車禁止標識」アイコンが表示されます）。

ドロップダウンの位置

ドロップダウン.dropdown-menu-rightを右揃えにするには、.dropdown-menuを使用してクラスを要素に追加します。

ドロップアップ

ドロップダウンメニューを下向きではなく上向きに展開する場合は、class = "dropdown"を指定した<div>要素を次のように変更し"dropup"ます。

ドロップダウンのアクセシビリティ

スクリーンリーダーを使用しているユーザーのアクセシビリティを向上させるには、ドロップダウンメニューを作成するときに、次の属性roleと属性を含める必要があります。aria-*

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

完全なブートストラップドロップダウンリファレンス

すべてのドロップダウンオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSドロップダウンリファレンスにアクセスしてください。