ドロップダウン メニュー リンクのリストを表示するための切り替え可能なコンテキスト メニュー。
1. ケース
ドロップダウン メニュー トリガーとドロップダウン メニューを .dropdown で囲み、メニューを構成する HTML コードを追加します。
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
上記のコードから、見慣れないスタイル クラスや属性が多数含まれている可能性があることがわかります。
右側のドロップダウン ボタンと小さなアイコン キャレット もちろん、この小さなアイコンとボタンのテキストは同じレベルにあります。
まず、ボタン ボタンにドロップダウン トグルがあり、この属性に基づいてドロップダウン リストがポップアップすることを確認します。
ul タグの直後にあるドロップダウン メニューは、上のボタン ボタンのスタイル クラス ドロップダウン トグルと組み合わせて使用する必要があり、上のボタン ボタンは aria-labelledby によってバインドされています。
4 番目の li タグにはディバイダがあります。これは実際には行を分割するためのスタイル クラスです。
これはおそらく私が理解していることですが、私の理解は決して適切ではありません。
2. 配置オプション
テキストを右揃えにするには、ドロップダウン メニュー .dropdown-menu に .text-right を追加します。
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
上記のコードの ul タグに text-right スタイル クラスを追加するだけです。
3. タイトル
アクションのグループは、タイトルを追加することでドロップダウン メニューで識別できます。
<h1>下拉菜单</h1> <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
主に追加されたのは
4. 無効なメニュー項目
ドロップダウン メニューの
引き続き上記のコードを変更し、「Something else here」行のコードを置き換えます
実際にクリックすると、上記のタイトルスタイルと同様の効果が表示されます。
5. 基本的なケース
1)、ボタン ドロップダウン メニュー
任意のボタンを .btn グループに配置し、正しいメニュー タグを追加することで、ドロップダウン メニュー トリガーを作成できます。
単一ボタンのドロップダウン メニュー
基本的なマークアップをいくつか変更するだけで、ボタンがドロップダウン メニュー スイッチに変わります。
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
分割ボタン ドロップダウン メニュー
同様に、分割ボタン ドロップダウンには同じ変更マークアップが必要ですが、別のボタンが必要です。
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div
小さなアイコンをクリックするだけでメニューが表示されます。
2)、サイズ
ドロップダウン メニュー ボタンは、すべてのボタン サイズで機能します。
<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Small button group --> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Extra small button group --> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div>
ボタンのサイズは、スタイル クラス .btn-lg、.btn-sm、.btn-xs を通じて制御します。
3)、ポップアップメニュー
親要素に .dropup を追加して、要素の上にトリガーされるドロップダウン メニューを作成します。
<div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> </ul> </div>
詳細については、以下を参照してください: ブートストラップ学習チュートリアル
概要:
この記事では、主にドロップダウン メニューの関連コンテンツを紹介し、その後、ボタンとドロップダウン メニューの組み合わせを紹介します。かなりの変更が加えられていますが、気に入っていただければ幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
