直線とボタンのグループを組み合わせて、一連のボタンのグループを作成します。 ボタンプラグインを使用して、 ラジオボタンとチェックボックス形式で動作するJavaScript処理を追加することができます。

ボタングループ内のツールチップとポップオーバーは特別な設定を必要とします
.btn-group内の要素上でツールチップまたはポップオーバーを使用する場合は、 不要な副作用(ツールチップ、またはポップオーバーがトリガされた際の要素の幅の間延び/角丸の喪失のような)を避けるために、 container: 'body'を指定する必要があります。

• 基本的な例
• ボタンツールバー
• サイズ変更
• 入れ子
• 垂直方向へ配置
• ボタングループの均等化

基本的な例

.btnを使用した一連のボタンを、.btn-groupで囲みます。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ボタンツールバー

<div class="btn-group">一式を、<div class="btn-toolbar">内に入れて組み合わせることで、 より複雑なコンポーネントを作成することが可能です。

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

サイズ変更

グループ内の各ボタンに、ボタンサイズを調整するクラスを適用する代わりに、 各.btn-groupに.btn-group-*を追加することで、 複数のグループが入れ子になっている場合も含めて、一括でサイズ調整することが可能です。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

入れ子

一連のボタンの中にドロップダウンメニューを混ぜたい場合は、 .btn-group内に別の.btn-groupを配置します。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

垂直方向へ配置

水平方向にではなく、垂直方向にボタン一式を積み重ねます。 スプリットボタンのドロップダウンメニューは、ここではサポートされません。

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ボタングループの均等化

ボタングループの幅を、その親要素の全体幅と同じサイズに伸ばします。 ボタングループ内のボタンドロップダウンに対しても有効です。

ボーダーの扱い
特定のHTMLとCSS(具体的にはdisplay: table-cell)にボタンの均等化が使用されることで原因で、 ボーダーが二重になってしまうという問題があります。 通常のボタングループは、ボーダーを削除するのでは無く、 margin-left: -1pxを使用することでボーダーを重ねています。 しかしながら、marginはdisplay: table-cellでは動作しません。 そのため、この問題を解決するにはボーダー色を変更したり削除するなど、 あなたのカスタマイズに委ねられることになります。

<a>要素を使用

.btn一式を.btn-group. btn-group-justifiedで囲むだけです。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ボタンとしてリンクを動作させる
<a>要素を別ページヘのまたは現在ページへのセクションへのナビゲーションとしてではなく、 ページ内の機能をトリガするボタンとして動作させる場合は、適切にrole="button"も与えられるべきです。

<button>要素を使用

<button>要素を使用してボタングループの均等化するには、 各ボタンをボタングループで囲わなければなりません。 ほとんどのブラウザは<button>要素を均等化するための我々のCSSを正確に適用してくれませんが、 ドロップダウンボタンをサポートしているため、これを回避することができます。(翻訳に自信なし)

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

 Back to top