ブートストラップ4ドロップダウン
基本的なドロップダウン
ドロップダウンメニューは、ユーザーが事前定義されたリストから1つの値を選択できるようにする切り替え可能なメニューです。
例
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
例の説明
.dropdownクラスはドロップダウンメニューを示します。
.dropdown-toggleドロップダウンメニューを開くには、のクラスと
data-toggle="dropdown"属性を持つボタンまたはリンクを使用します。
.dropdown-menuクラスを要素に追加して、<div>実際にドロップダウンメニューを作成します。次に
.dropdown-item、ドロップダウンメニュー内の各要素（リンクまたはボタン）にクラスを追加します。
ドロップダウンディバイダー
この.dropdown-dividerクラスは、ドロップダウンメニュー内のリンクを細い水平方向の境界線で区切るために使用されます。
例
<div class="dropdown-divider"></div>
ドロップダウンヘッダー
この.dropdown-headerクラスは、ドロップダウンメニュー内にヘッダーを追加するために使用されます。
例
<div class="dropdown-header">Dropdown header 1</div>
無効アイテムとアクティブアイテム
クラスで特定のドロップダウンアイテムを強調表示します.active（青色の背景色を追加します）。
ドロップダウンメニューの項目を無効にするには、.disabledクラスを使用します（明るい灰色のテキストの色と、ホバー時に「駐車禁止標識」アイコンが表示されます）。
例
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
ドロップダウンの位置
.droprightドロップダウン要素にまたは.dropleftクラスを追加することにより、「ドロップライト」または「ドロップレフト」メニューを作成することもできます。キャレット/矢印が自動的に追加されることに注意してください。
ドロップライト
<div class="dropdown dropright">
ドロップレフト
<div class="dropdown dropleft">
ドロップダウンメニュー右
ドロップダウンメニュー.dropdown-menu-rightを右揃えにするには、.dropdown-menuを使用してクラスを要素に追加します。
例
<div class="dropdown-menu dropdown-menu-right">
ドロップアップ
ドロップダウンメニューを下向きではなく上向きに展開する場合は、class = "dropdown"を指定した<div>要素を次のように変更し"dropup"ます。
例
<div class="dropup">
ドロップダウンテキスト
この.dropdown-item-textクラスは、ドロップダウンアイテムにプレーンテキストを追加するために使用されるか、デフォルトのリンクスタイルのリンクで使用されます。
例
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
ドロップダウン付きのグループ化されたボタン
例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
分割ボタンのドロップダウン
例
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
ドロップダウン付きの垂直ボタングループ
例
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
完全なブートストラップ4ドロップダウンリファレンス
すべてのドロップダウンオプション、メソッド、およびイベントの完全なリファレンスについては、 Bootstrap 4JSドロップダウンリファレンスにアクセスしてください。