ボタングループ

ボタングループは関連した操作を1行に並べて表示したいときに使用します。

<div class="btn-group" role="group">
  <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>

.btn-group-spaceを追加すると、ボタンの間にスペースが作られます。

<div class="btn-group btn-group-space" role="group">
    <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>

ベストプラクティス

  • ボタンガイドラインに沿ったボタンを実装すること
  • グループの中にあるボタンは何かしら関係性を示しています
  • 混乱の基になるので、5つ以上のボタンをグループにしないこと