Bootstrap4 ボタングループ

Bootstrap4 ボタングループ

この記事では、Bootstrap4のボタングループの定義、使用方法、およびさまざまな種類のボタングループの作成方法について説明します。

1. Bootstrap4 ボタングループ

定義: ボタングループは、関連するアクションをまとめてグループ化するために使用される、ボタンをまとめるためのコンテナです。

使い方: .btn-group クラスを使用して、デフォルトのボタングループを作成します。

<div class="btn-group">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>

2. ボタンツールバー

定義: ボタンツールバーは、複数のボタングループを水平方向に配置するために使用されます。

使い方: .btn-toolbar クラスを使用してボタンツールバーを作成し、その中に .btn-group コンテナをネストします。

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

3. サイズ

説明: .btn-group-* クラスを追加することで、ボタングループのサイズを制御できます。

種類:

クラス 説明
.btn-group-sm 小型ボタングループ
.btn-group-lg 大型ボタングループ

4. ネスト

説明: ボタングループ内により複雑なドロップダウンメニューを作成するために、ドロップダウンメニューをネストすることができます。

使い方: .btn-group コンテナ内に .dropdown コンテナをネストします。

<div class="btn-group">
  <button type="button" class="btn btn-primary">ボタン</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">アクション1</a>
    <a class="dropdown-item" href="#">アクション2</a>
  </div>
</div>

5. 垂直方向の配置

説明: .btn-group-vertical クラスを追加することで、ボタングループ内のボタンを垂直方向に配置できます。

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>

6. 両端揃え

説明: flexboxユーティリティクラスを使用して、ボタングループ内のボタンの配置を制御できます。

使い方:

  • .justify-content-between: ボタングループ内のボタンを均等に配置します。
  • .justify-content-center: ボタングループ内のボタンを中央揃えにします。
<div class="btn-group justify-content-between">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
</div>

7. 状態

説明: .active クラスを追加することで、現在アクティブなボタンを示すことができます。

説明: .disabled クラスまたは disabled 属性を追加することで、ボタンを無効化できます。

<button type="button" class="btn btn-primary active">アクティブ</button>
<button type="button" class="btn btn-primary disabled">無効</button>

参考資料

よくある質問

  1. ボタングループ内にドロップダウンメニューをネストするにはどうすればよいですか？

    .btn-group コンテナ内に .dropdown コンテナをネストします。詳細については、上記の「ネスト」セクションを参照してください。

  2. ボタングループ内のボタンを垂直方向に配置するにはどうすればよいですか？

    .btn-group-vertical クラスをボタングループコンテナに追加します。詳細については、上記の「垂直方向の配置」セクションを参照してください。

  3. ボタングループ内のボタンを無効にするにはどうすればよいですか？

    .disabled クラスまたは disabled 属性をボタンに追加します。詳細については、上記の「状態」セクションを参照してください。