ブートストラップ4ボタングループ
ボタングループ
Bootstrap 4を使用すると、一連のボタンをボタングループに(1行で)グループ化できます。
<div>
クラスを持つ要素を使用.btn-group
して、ボタングループを作成します。
例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
ヒント:グループ内のすべてのボタンにボタンサイズを適用する代わりに.btn-group-lg
、大きなボタングループまたは.btn-group-sm
小さなボタングループにはクラスを使用します。
大きなボタン:
デフォルトのボタン:
小さなボタン:
例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
垂直ボタングループ
Bootstrap 4は、垂直ボタングループもサポートしています。
クラス.btn-group-vertical
を使用して、垂直ボタングループを作成します。
例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
ネストボタングループとドロップダウンメニュー
ドロップダウンメニューを作成するためのネストボタングループ(ドロップダウンについては後の章で詳しく説明します):
例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
分割ボタンのドロップダウン
例
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
ドロップダウン付きの垂直ボタングループ
例
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
ボタングループを並べて
ボタングループはデフォルトで「インライン」であるため、複数のグループがある場合はボタングループが並べて表示されます。
例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>