この章では、Bootstrap クラスを使用してボタンにドロップダウン メニューを追加する方法を説明します。ボタンにドロップダウン メニューを追加するには、ボタンとドロップダウン メニューを .btn-group に配置するだけです。 を使用して、ボタンがドロップダウン メニューとして機能することを示すこともできます。
前の言葉
ボタン型のドロップダウンメニューは見た目だけで、効果は基本的にドロップダウンメニューと同じです。違いは、通常のドロップダウン メニューはブロック要素であるのに対し、ボタンのドロップダウン メニューはインライン ブロック要素であることです。この記事では、Bootstrap ボタンのドロップダウン メニューについて詳しく紹介します
ボタンのドロップダウン メニューは、実際には通常のドロップダウン メニューです。唯一の違いは、外部コンテナー「div.dropdown」が置き換えられることです。 "div.btn-group" により、ブロックからインラインブロックに変更されました
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li> </ul></div><div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li> </ul></div>
たとえば、一部のメニューはページの下部にあり、このメニューにはたまたまドロップダウン メニューがあり、ユーザーがより多くの情報を取得できるようにするために、ドロップダウン メニューをポップアップ表示する必要がありました。 Bootstrap フレームワークでは、このエフェクトのために特別に「dropup」というクラス名が提案されています。このクラス名を「btn-group」に追加するだけです
[Triangle]
ボタンの下向き三角形をデフォルトで渡します。
按钮下拉菜单
この三角形は完全にCSSコードで実装されています
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
さらに、ボタン内の三角形は「キャレット」特定のスタイル処理が行われています:
.btn .caret { margin-left: 0; }.btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; }.dropup .btn-lg .caret { border-width: 0 5px 5px; }
三角形の方向を上向きに表示する必要がある場合は、「.btn-group」クラスに「dropup」クラス名を追加する必要があります。下向きの三角形 違い: 実際にボーダーボトムの値を変更します
.dropup .caret, .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px solid; }
<div class="btn-group dropup" style="margin-top:140px"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li><li><a href="##">按钮下拉菜单项</a></li></ul></div>
分割ボタンのドロップダウン メニューは、実際にはボタンと三角形を人為的に分離します。最終的にはもう 1 つになります。 別々のボタン
<div class="btn-group"> <button type="button" class="btn">Action</button> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li> </ul></div>
ボタンのドロップダウン メニューは、btn-xs、btn-lg、btn- を含むすべてのサイズのボタンに適しています。もちろん、通常のドロップダウン リストはボタン サイズの変更もサポートしています
<div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div><div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div><div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">small button <span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div>
通常のドロップダウン リストの一部の拡張用途 (区切り線、分割線、整列、メニューなど)アイテムのステータスなど、ボタンのドロップダウン メニューもサポートされています。そのため、ブートストラップでボタンのドロップダウンメニューコンポーネントを設定するのは、個人的には少し冗長な気がします。ブロックとインラインブロックの違いだけで、機能的な違いはありません
。以上がブートストラップ ボタンのドロップダウン メニューのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。