Bootstrapは、フロントエンド開発のためにTwitterによって発売されたオープンソースのツールキットです。 TwitterデザイナーのMark OttoとJacob Thorntonによって開発され、CSS/HTMLフレームワークです。
ボタングループ
.btn-group> .btn：.btnボタンのセットが.btn-groupに包まれています
Autsourcing Elements.btn-group {position/display/}
ボタンelement.btn
<div role = "group"> <ボタンタイプ= "ボタン">左</button> <button type = "button"> middle </button> <button type = "button"> right </button> </div>
ボタンツールバー
.btn-toolbar> .btn-group
アウトソーシングelement.btn-toolbar {margin-left}
<div role = "toolbar"> <div role = "group"> ... </div> <div role "> ... </div> <div role =" group "> ... </div> </div>
ボタンサイズ
.btn-group-*（lg/md/sm/xs）
.btn-group-*>。btn {padding/font-size/border-radius}
<div> <butth>左</button> <butth>中央</button> <butth>右</button> </div>
ボタンネスティング
.btn-group nesting.btn-group
<div role = "btn-group"> <butth> button1 </button> <butth> button 2 </button> <div role = "btn-group"> <button data-toggle = "span> </span> </button> <ul> <li> <a>プロジェクト1 </a> </li> <id
垂直に配置されたボタングループ
.btn-group-vertical
<div role = "btn-group"> ... </div>
ボタングループの両端を調整します
親要素の幅を埋めるように現れます
欠陥：マージンがディスプレイをサポートしていないため：テーブルセル。二重境界の効果が現れます
必要なボタンネスト。
<div role = "group"> <div role = "group"> <butth>左</button> </div> <div role = "group"> <butth>左</button> </div> <div role = "group"> <button data-toggle = "dropdown">右<span> </span> </button> <ul> <li> <a> item1 </a> </li> <li> <a> item2 </a> </li> </ul> </div> </div>
ボタンスタイルのドロップダウンメニュー
アウトソーシング要素class.btn-group {display/position}
ドロップダウンメニュープラグインに依存します
シングルボタンドロップダウンメニュー
<div role = "group"> <button data-toggle = "dropdown"> button <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
スプリットボタンプルダウンメニュー
<div> <butth> button </button> <button data-toggle = "ドロップダウン"> <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
ボタンドロップダウンメニューサイズ
control size.btn-*：。btn-lg/btn-sm/btn-xs {padding/font-size/border-radius}
<div> <ボタンData-Toggle = "Dropdown"> Button <Span> </span> </button> <ul> <li> <a href = "" "> item1 </a> </li> <li> <a href =" "> item2 </a> </li> </ul> </div>
ポップアップメニュー
コントロールポップアップの方向：.dropup.drop-menu {bottom/margin-bottom}
<div> <ボタンData-Toggle = "Dropdown"> Button <Span> </span> </button> <ul> <li> <a href = "" "> item1 </a> </li> <li> <a href =" "> item2 </a> </li> </ul> </div>
上記は、編集者が紹介したブートストラップコンポーネント（2）ボタンに関する関連する知識です。それがあなたに役立つことを願っています！