Bootstrap ボタン グループ

基本用法：ボタンを並べて整理整頓

ボタングループを作成する基本的な方法は、.btn-group クラスを使って複数のボタンをラップすることです。これにより、複数のボタンを一列に並べてグループ化できます。

アクセシビリティの考慮

ボタングループに role="group" と aria-label 属性を追加することで、画面リーダーを使用するユーザーにもアクセス可能になります。

リンクボタン

.btn-group は <a> タグでも使用可能で、リンクボタンのグループを作成できます。

コード例：

<div class="btn-group" role="group" aria-label="基本的なボタングループ">
  <button type="button" class="btn btn-primary">左</button>
  <button type="button" class="btn btn-primary">中央</button>
  <button type="button" class="btn btn-primary">右</button>
</div>

混合スタイル：ボタンの個性、多彩に

ボタングループでは、異なるスタイルのボタンを一緒に使用することも可能です。例えば、.btn-danger、.btn-warning、.btn-success などを組み合わせることで、視覚的な変化をつけられます。

コード例：

<div class="btn-group" role="group" aria-label="混合スタイルのボタングループ">
  <button type="button" class="btn btn-danger">危険</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-success">成功</button>
</div>

アウトラインスタイル：軽快でシンプルに

.btn-outline-* クラスを使用すると、ボタングループに軽快なアウトラインスタイルを適用できます。これは、強調したいが重すぎないデザインに最適です。

コード例：

<div class="btn-group" role="group" aria-label="アウトラインスタイルのボタングループ">
  <button type="button" class="btn btn-outline-primary">アウトライン1</button>
  <button type="button" class="btn btn-outline-secondary">アウトライン2</button>
  <button type="button" class="btn btn-outline-success">アウトライン3</button>
</div>

チェックボックスとラジオボタングループ：スイッチと選択機能

Bootstrapでは、チェックボックスやラジオボタンをボタングループに変換できます。.btn-check を使用し、<label> タグでボタンをラップすることで、スタイリッシュなスイッチや選択ボタンを作成できます。

コード例（ラジオボタングループ）：

<div class="btn-group" role="group" aria-label="ラジオボタングループ">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="option1">オプション1</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">オプション2</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
  <label class="btn btn-outline-primary" for="option3">オプション3</label>
</div>

ボタンツールバー：複雑なレイアウトにも対応

複数のボタングループを一列に並べたい場合は、.btn-toolbar クラスを使用してボタンツールバーを作成します。これにより、グループ化されたボタンを整理しながら並べられます。

コード例（入力フィールドを含むボタンツールバー）：

<div class="btn-toolbar" role="toolbar" aria-label="ボタンツールバー">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-primary">ボタン1</button>
    <button type="button" class="btn btn-primary">ボタン2</button>
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="テキスト入力">
  </div>
</div>

サイズ調整：一貫した大きさ、柔軟なコントロール

ボタングループのサイズは、.btn-group-lg（大）や .btn-group-sm（小）クラスを追加することで調整できます。個別のボタンにサイズクラスを付与するのではなく、ボタングループ全体に適用します。

コード例：

<div class="btn-group btn-group-lg" role="group" aria-label="大きいボタングループ">
  <button type="button" class="btn btn-primary">大ボタン1</button>
  <button type="button" class="btn btn-primary">大ボタン2</button>
</div>

<div class="btn-group btn-group-sm mt-3" role="group" aria-label="小さいボタングループ">
  <button type="button" class="btn btn-primary">小ボタン1</button>
  <button type="button" class="btn btn-primary">小ボタン2</button>
</div>

ネスト構造：ボタンとドロップダウンメニューの融合

ボタングループにドロップダウンメニューを組み込むことで、複雑な操作を簡単にまとめることができます。.dropdown-toggle や .dropdown-menu を使用してドロップダウンを作成します。

コード例：

<div class="btn-group" role="group" aria-label="ネストしたボタングループ">
  <button type="button" class="btn btn-primary">ボタン1</button>
  
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      ドロップダウン
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">アクション1</a></li>
      <li><a class="dropdown-item" href="#">アクション2</a></li>
    </ul>
  </div>
</div>

垂直配置：縦方向のレイアウトでスペースを有効活用

.btn-group-vertical クラスを使用すると、ボタングループを垂直に配置できます。これにより、縦に並べることでスペースを効率的に使えます。ただし、分割されたドロップダウンメニューはサポートされていません。

コード例（垂直ボタングループ）：

<div class="btn-group-vertical" role="group" aria-label="垂直ボタングループ">
  <button type="button" class="btn btn-primary">上</button>
  <button type="button" class="btn btn-primary">中央</button>
  <button type="button" class="btn btn-primary">下</button>
</div>

これらの機能を組み合わせることで、Bootstrapのボタングループを使って、効率的でアクセシブルなUIを

構築することができます。各機能を柔軟に使用し、異なるレイアウトやスタイルのニーズに応じて最適なデザインを実現しましょう。