ボタングループも独立したコンポーネントです。ボタングループは、ドロップダウンメニューコンポーネントと同じであり、ボタンに頼る必要があります。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固体透明;}上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。