ボタングループも独立したコンポーネントです。ボタングループは、ドロップダウンメニューコンポーネントと同じであり、ボタンに頼る必要があります。JSプラグインは正常に機能します。
<div>のグループを1つの<div>に組み合わせて、より複雑なコンポーネントを作成します。
<div role = "toolbar"> <div> <ボタンタイプ= "ボタン"> 1 </button> <ボタン= "ボタン"> 2 </button> <ボタンタイプ= "ボタン"> 3 </button> <ボタンタイプ= "ボタン"> 4 </button> <ボタン= "ボタン"> 5 </button> <ボタンタイプ= ">"ボタン> type = "button"> 7 </button> <button type = "button"> 8 </button> </div> <div> <button type = "button"> 9 </button> </div> </div>
ボタンドロップダウンメニューは、ドロップダウンメニューのように見えます。それらの唯一の違いは、外部コンテナdiv.dropdownがdiv.btn-groupに置き換えられていることです。
<div> <ボタンデータトグル= "ドロップダウン">ボタンドロップダウンメニュー<Span> </span> </button> <ul> <li> <ulf = "＃">メニューリスト1 </a> </li> <li> <a href = ">メニューリスト2 </a> </a> </li> <a href =" href = "＃">メニューリスト4 </a> </li> <li> <a href = "＃">メニューリスト5 </a> </li> </ul> </div>
bootstrap.cssファイル
.btn-group .dropdown-toggle：Active、.btn-group.open .dropdown-toggle {outline：0;}。btn-group> .btn + .dropdown-toggle {padding-right：8px;パディング左：8px;}。btn-group> .btn-lg + .dropdown-toggle {padding-right：12px;パディング左：12px;}。btn-group.open .dropdown-toggle {-webkit-box-shadow：inset 0 3px 5px rgba（0、0、0、.125）; Box-shadow：Inset 0 3PX 5PX RGBA（0、0、0、.125）;}。 Box-Shadow：なし;}ボタンの下向きの上向きの三角形
ボタンの下向きの三角形は、ボタンタグにスパンタグ要素を追加することです。クラス名は.caretです。
<ボタンData-Toggle = "Dropdown">ボタンドロップダウンメニュー<span> </span> </button>
この三角形フォームは、CSSを介して実装されています。以下は、bootstrap.cssのソースコードです。
.caret {display：inline-block;幅：0;高さ：0;マージン左：2px;垂直アライイン：中央;ボーダートップ：4pxソリッド。国境右：4px固体透明。国境左：4px固体透明;}上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。