編集 Github

ドロップダウン

ブートストラップドロップダウンプラグインを使用して、リンクの一覧などを表示するためのコンテキストオーバーレイを切り替えます。

例

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

ワンボタンドロップダウン

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンボタン
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">アクション</a>
    <a class="dropdown-item" href="#">もう一つの行動</a>
    <a class="dropdown-item" href="#">他に何か</a>
  </div>
</div>

そしてと <a> 要素:

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンリンク
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">アクション</a>
    <a class="dropdown-item" href="#">もう一つの行動</a>
    <a class="dropdown-item" href="#">他に何か</a>
  </div>
</div>

最良の部分は、あなたがどんなボタンの変形でもこれをすることができるということです:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">アクション</a>
    <a class="dropdown-item" href="#">もう一つの行動</a>
    <a class="dropdown-item" href="#">他に何か</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">分離リンク</a>
  </div>
</div>

分割ボタンのドロップダウン

同様に、シングルボタンドロップダウンとほぼ同じマークアップで分割ボタンドロップダウンを作成しますが、ドロップダウンキャレットの周囲に適切な間隔を空けるために .dropdown-toggle-splitを追加します。

キャレットの両側の水平方向の paddingを25％減らし、通常のボタンドロップダウンに追加された margin-leftを削除するためにこの特別なクラスを使います。これらの追加の変更は、キャレットを分割ボタンの中央に配置し、メインボタンの横に適切なサイズのヒット領域を提供します。

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">アクション</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">ドロップダウンの切り替え</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">アクション</a>
    <a class="dropdown-item" href="#">もう一つの行動</a>
    <a class="dropdown-item" href="#">他に何か</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">分離リンク</a>
  </div>
</div>

ドロップアップバリエーション

親要素に .dropupを追加することで要素の上のドロップダウンメニューを起動します。

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">ドロップアップ</button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">ドロップダウンの切り替え</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
      分割ドロップアップ
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">ドロップダウンの切り替え</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.