ボタングループは、ドロップダウンメニューコンポーネントと同じであり、適切に機能するためにボタン.jsプラグインに依存する必要があります。
構造的側面：クラス名BTNグループのコンテナを使用し、このコンテナに複数のボタンを配置します。
ボタングループは独立したコンポーネントでもあるため、対応するソースファイルを見つけることができます。
LESS：BOTTONS.LESS
sass：_buttons.scss
CSS：bootstrap.css行3131〜3291
<div> <ボタンタイプ= "ボタン"> <span> </span> </button>…<ボタンタイプ= "button"> <span> </span> </button> </div>
CSS：
.btn-group、.btn-group-vertical {position：relative; display：inline-block; vertical-align：middle;}。btn-group> .btn、.btn-group-vertical> .btn {position：relative; float：left;}。 .btn：Hover、.btn-group-vertical> .btn：focus、.btn-group-vertical> .btn：focus、.btn-group-vertical> .btn：active、.btn-group-vertical> .btn：active、.btn-group> .btn.active、.btn-group-vertical>。 2;}。btn-group> .btn：focus、.btn-group-vertical> .btn：focus {outline：none;}。btn-group .btn + .btn、.btn-group .btn + .btn-group、.btn-group .btn-group + .btn-group {magne-left：-1px;}<button>要素を使用することに加えて、<a>タグなどの他のタグ要素を使用することもできます。確実なことは、どのタグが使用されていても、.btn-groupコンテナのタグ要素がクラス名を必要とする必要があるということです。
ボタングループの四隅はすべて丸い角にありますが、端に角が丸くなった最初と最後のボタンを除き、他のボタンには丸い角がありません。
詳細な説明：
1。デフォルト：すべてのボタンは丸い角です
2。最初のボタンと最後のボタンを除き、他のボタンは丸くなります。
3.最後のボタンは、丸い角と右下隅としてのみ残されています。
ソースコード：
.btn-group> .btn：not（：first-child）：not（：last-child）：not（.dropdown-toggle）{border-radius：0;}。btn-group> .btn：first-child {margin-left：0;}。 {border-top-right-radius：0; border-bottom-right-radius：0;}。btn-group> .btn：last-child：not（：first-child> .dropdown-toggle：not（：first-child）{border-top-left-radius：0; border-left-radius：0; .btn-group {float：left;}。btn-group> .btn-group：not（：first-child）：not（：last-child）> .btn {border-radius：0;}。btn-group> .btn-group：first-child> .btn：last-child、.btn-groug：.btn-group> .thrup>。btn-groug： {border-top-right-radius：0; border-bottom-right-radius：0;}。btn-group> .btn-group：last-child> .btn：first-child {border-top-left-radius：0; border-bottom-left-radius：0;}ボタングループツールバー
豊富なテキストエディターでは、コピー、カット、グループのカット、貼り付け、左、中央、右端、2つの端などのボタングループを一緒に配置し、ブートストラップフレームボタンツールバーBTN-TOOLBARを使用します
<div> <div>…</div> <div>…</div> <div>…</div> <div>…</div> <div>…</div> </div>
原則：主にコンテナの複数のグループを.btn-group要素に浮かせ、グループ間で5pxの左外距離を保持します。
.btn-toolbar {margin-left：-5px;}。btn-toolbar .btn-group、.btn-toolbar .input-group {float：left;}。BTN-Toolbarのフロートをクリアすることに注意してください
.btn-toolbar：before、.btn-toolbar：after {display：table; content： "";}。例：
<div> <div> <ボタンタイプ= "ボタン"> <span> </span> </button> <button = "button"> <span> </span> </button> <button> <button> </span> </button> <button> <button> "button"> </span> </div> <div> <button = ""> <span </span </button> </div>
ボタンネスティンググループ
多くの場合、ドロップダウンメニューのボタングループを一緒に配置して、ナビゲーションメニューと同様の効果を実現します。
使用するときは、BTNグループにドロップダウンメニューを作成したドロップダウンコンテナのクラス名を変更して、通常のボタンと同じレベルに配置するだけです。
<div> <ボタンタイプ= "ボタン">ホーム</button> <ボタンタイプ= "ボタン">製品表示</button> <ボタンタイプ= "ボタン">ケース分析</button> <ボタンタイプ= "button">連絡先</button> <div> <div> <button data-toggle = "dropdown" type = "ボタン"プロフィール</a> </li> <li> <a href = "＃">コーポレートカルチャー</a> </li> <li> <a href = "＃">組織構造</a> </li> <li> <a href = ">カスタマーサービス</a> </li> </ul> </div>左;}。btn-group> .btn-group：not（：first-child）：not（：last-child）> .btn {border-radius：0;}。btn-group> .btn-group：first-child、.btn-group> .btn-group：first-child> .dropdown-top-radius： 0; border-bottom-right-radius：0;}。btn-group> .btn-group：last-child> .btn：first-child {border-top-left-radius：0; border-bottom-left-radius：0;}。 0;}。btn-group> .btn + .dropdown-toggle {padding-right：8px; padding-left：8px;}。btn-group> .btn-lg + .dropdown-toggle {padding-right：12px; padding-left：12px;}。 {-webkit-box-shadow：inset 0 3px 5px rgba（0、0、0、.125）; box-shadow：inset 0 3px 5px rgba（0、0、0、.125）;}。垂直にグループ化されたボタン
水平にグループ化されたクラスname.btn-groupを.btn-group-verticalに置き換えるだけです。
<div> <ボタンタイプ= "ボタン">ホーム</button> <ボタンタイプ= "ボタン">製品表示</button> <ボタンタイプ= "ボタン">ケース分析</button> <ボタンタイプ= "button">連絡先</button> <div> <div> <button data-toggle = "dropdown" type = "ボタン"プロフィール</a> </li> <li> <a href = "＃">コーポレートカルチャー</a> </li> <li> <a href = "＃">組織構造</a> </li> <li> <a href = ">カスタマーサービス</a> </li> </ul> </div> .btn-group、.btn-group-vertical> .btn-group、.btn-group-vertical> .btn-group-vertical> .btn-group-vertical> .btn {display：block; float：none; width：100％; max-width：100％;}。 > .btn + .btn、.btn-group-vertical> .btn + .btn-group、.btn-group-vertical>。 .btn：not（：first-child）：not（：last-child）{border-top-right-radius：4px; border-bottom-right-radius：.btn {border-bottom-left-radius：0;}。 0; Border-Bottom-Left-radius：4px;}。btn-group-vertical> .btn-group：not（：first-child）：not（：last-child）> .btn {border-radius：0;}。 .btn：last-child、.btn-group-vertical> .btn-group：first-child：not（：last-child）> .dropdown-toggle {border-bottom-right-radius：0; border-bottom-left-radius：0;}。 {border-top-left-radius：0; border-top-right-radius：0;}イコライゼーションボタンは、適応グループ化ボタンとも呼ばれます。
ボタングループ全体の幅はコンテナの100％であり、ボタングループの各ボタンはコンテナ全体の幅を分割します。たとえば、ボタングループには5つのボタンがあり、各ボタンはコンテナの幅の20％です。ボタングループには4つのボタンがあり、各ボタンはコンテナの幅の25％です。
実装方法：クラスname.btn-group-justefiedをclass name.btn-group.btn-groupに追加するだけです
<div> <buttton type = "button"> home </buttton> <buttton type = "button">ケース分析</buttton> <buttton> <buttton type = "button">お問い合わせ</buttton> </div> .btn-group-justified {display：table; width：100％; table-leayout：sixed-collapsed; .btn、.btn-group-justified> .btn-group {display：table-cell; float：none; width：1％;}。btn-group-justified> .btn-group .btn {width：100％;}.btn-group-justefiedをテーブル（表示：テーブル）にシミュレートし、テーブルセル内のボタンテンプレート（表示：テーブルセル）をシミュレートします。
注：等しいボタンのグループを作成するときは、<a>タグを使用してボタンを作成してみてください。ボタンタグ要素を使用する場合、表示：テーブルは一部のブラウザでサポートするのにフレンドリーではありません。
wulin.comからの推奨読み取り：
ブートストラップボタンの詳細な説明
上記は、エディターが紹介したブートストラップボタンコンポーネントです。それがあなたに役立つことを願っています！