ドロップダウン

ベーシックドロップダウン

ドロップダウンは、ユーザーが定義済みのリストから1つの値を選択できるメニューです。

.dropdown クラスは、ドロップダウンメニューを表示します。
ドロップダウンメニューを開くには、 .dropdown-toggle クラスと data-toggle="dropdown" 属性のボタンまたはリンクを使用します。
.caret クラスは、ボタンがドロップダウンであることを示す矢印アイコンを作成します。
.dropdown-menu クラスを <ul> 要素に追加して、実際にドロップダウンメニューを構築します。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">ドロップダウン
  <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>

区切り線

.divider クラスを使用して、ドロップダウンメニュー内のリンクを細い水平の枠線で区切ります。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">ドロップダウン
  <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>
    <li class="divider"></li>
    <li><a href="#">About Us</a></li>
  </ul>
</div>

ドロップダウンヘッダー

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

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">ドロップダウン
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">ドロップダウンヘッダー1</li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">ドロップダウンヘッダー2</li>
    <li><a href="#">About Us</a></li>
  </ul>
</div>

選択状態と選択不可

.active クラスで特定のドロップダウンアイテムを強調表示します（青の背景色を追加します）。
ドロップダウンメニューの項目を無効にするには、 .disabled クラスを使用します。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">ドロップダウン
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Normal</a></li>
    <li class="disabled"><a href="#">Disabled</a></li>
    <li class="active"><a href="#">Active</a></li>
    <li><a href="#">Normal</a></li>
  </ul>
</div>

ポジション

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

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">ドロップダウン
  <span class="caret"></span></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="divider"></li>
    <li><a href="#">About Us</a></li>
  </ul>
</div>

ドロップアップ

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">ドロップアップ
  <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>
    <li class="divider"></li>
    <li><a href="#">About Us</a></li>
  </ul>
</div>