ブートストラップ コンポーネント ボタンのドロップダウン menu_html/css_WEB-ITnose

任意のボタンを .btn-group に配置し、適切なメニュー ラベルを追加して、ボタンがメニューのトリガーとして機能するようにします。

簡単な実装は以下の通りです

<div class="btn-group">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Action <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>

Effect

先ほどのボタンの右側に小さな三角形が追加されています。 ボタンの色は と同じです。ボタンの style 属性をドキュメント内に置くことができますが、そのようなボタンがクリックされるまでドロップダウン メニューは表示されません。 -down メニューの上にマウスをスライドすると、スタイルの変更方法が表示されます。以前の記事または Baidu を参照してください。

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

同様に、分割ボタン ドロップダウンでも一部のマークアップに同じ変更が必要ですが、別のボタンが必要です。

<div class="btn-group">  <button type="button" class="btn btn-danger">Action</button>  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="caret"></span>    <span class="sr-only">Toggle Dropdown</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-lg、btn-small などと同じです。前のボタンの紹介を参照してください。

上向きポップアップ メニュー

実装は非常に簡単です。トリガーされたドロップダウン メニューを上向きに開くには、.dropup クラスを親要素に追加するだけです。

ドロップダウン ボタン グループについては以上です。詳細については、www.bootcss.com にアクセスして学習してください。