Bootstrap4 ドロップダウンメニュー
Bootstrap 4 ドロップダウンメニュー（Dropdown）は、クリック可能なオプションやメニュー項目の一連を表示するための非常に一般的なUIコンポーネントです。
Bootstrap4 ドロップダウンメニューは通常、ナビゲーションバー、フォーム、その他のインタラクティブなインターフェースで使用されます。
基本结构
Bootstrap 4 ドロップダウンメニューの核心は.dropdownクラスであり、メニューの表示をトリガーするために他の要素（ボタン、リンク、テキストなど）をネストできます。メニュー項目自体は .dropdown-menu クラスで識別され、具体的なオプションは .dropdown-item クラスを使用します。
Bootstrap4 ドロップダウンメニューは依存するpopper.min.js。
スタイルクラスの説明：
| 类名 | 说明 | 示例用法 |
|---|---|---|
.dropdown | ドロップダウンメニューのコンテナクラスで、ボタンとメニューを包みます。 | <div class="dropdown">...</div> |
.dropdown-toggle | ドロップダウンメニューをトリガーするボタンを作成するために使用され、通常は.btn类使用。 | <button class="btn btn-secondary dropdown-toggle">...</button> |
data-toggle="dropdown" | ボタンやリンクがドロップダウンメニューの表示と非表示をトリガーできるようにします。 | <button data-toggle="dropdown">Dropdown button</button> |
.dropdown-menu | ドロップダウンメニューのコンテナクラスで、メニュー項目を含みます。 | <div class="dropdown-menu">...</div> |
.dropdown-item | ドロップダウンメニュー内のメニュー項目で、通常はリンクです。 | <a class="dropdown-item" href="../index.html">Item</a> |
aria-haspopup="true" | アクセシビリティサポートを追加し、この要素にポップアップメニューがあることを示します。 | <button aria-haspopup="true">Dropdown</button> |
aria-expanded="false" | アクセシビリティサポートを追加し、メニューの現在の状態（展開または折りたたみ）を示します。 | <button aria-expanded="false">Dropdown</button> |
ドロップダウンメニューは切り替え可能で、リンクをリスト形式で表示するコンテキストメニューです。
实例
<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"属性。
<div>元素上添加.dropdown-menuクラスを追加してドロップダウンメニューを実装し、その後ドロップダウンメニューのオプションに.dropdown-item类。
私たちは〜でもできます<a>タグ内で使用：
实例
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
尝试一下 »
ドロップダウンメニュー内の区切り線
.dropdown-dividerクラスを追加して、ドロップダウンメニュー内に水平の区切り線を作成します。
ドロップダウンメニュー内のタイトル
.dropdown-headerクラスはドロップダウンメニューにタイトルを追加するために使用されます：
ドロップダウンメニュー内の利用可能項目と無効項目
.active クラスはドロップダウンメニューのオプションをハイライト表示します（青い背景を追加）。
ドロップダウンメニューのオプションを無効にする場合は、.disabled类。
实例
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
尝试一下 »
ドロップダウンメニューの位置指定
ドロップダウンメニューを右揃えにしたい場合は、要素の .dropdown-menu クラスの後に.dropdown-menu-right类。
ドロップダウンメニューの表示方向の設定
ドロップダウンメニューのポップアップ方向はデフォルトで下向きですが、もちろん異なる方向を設定することもできます。
右に展開するドロップダウンメニューを指定します
ドロップダウンメニューを右にポップアップさせたい場合は、div 要素に"dropright"类:
实例
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
尝试一下 »
上に展開するドロップアップメニューを指定します
上にポップアップするメニューを希望する場合は、div 要素に"dropup"类:
实例
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</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">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
尝试一下 »
左に展開するドロップダウンメニューを指定します
ドロップダウンメニューを上にポップアップさせたい場合は、div 要素に"dropleft"类:
实例
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
尝试一下 »
ドロップダウンメニューのテキスト設定
.dropdown-item-textクラスはドロップダウンメニュー内のテキスト項目を設定できます。
实例
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
<a class="dropdown-item-text" href="#">文本链接</a>
<span class="dropdown-item-text">単なるテキスト</span>
</div>
尝试一下 »
ボタンにドロップダウンメニューを設定する
ボタンにドロップダウンメニューを追加できます。
实例
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</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>
尝试一下 »