Bootstrap 5 ボタングループ
コース推薦：
ボタングループ
Bootstrap 5を使用して、ボタングループに一連のボタンを組み合わせることができます（一行上）： .btn-group クラスの <div> 要素を使用してボタングループを作成してください：
例
<div class="btn-group"> <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-group-lg 大ボタングループに使用するか、または .btn-group-sm 小ボタングループ用：
例
<div class="btn-group btn-group-lg"> <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 5 は垂直ボタングループもサポートしています：
クラスを使用してください .btn-group-vertical 垂直ボタングループを作成します：
例
<div class="btn-group-vertical"> <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>
並行ボタングループ
デフォルトでは、ボタングループは「inline」です。複数のボタングループがある場合、並行して表示されます：
例
<div class="btn-group"> <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> <div class="btn-group"> <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>
ネストされたボタングループとドロップダウンメニュー
ネストされたボタングループを使用して、ドロップダウンメニューを作成できます（ドロップダウンメニューに関する詳細は後の章で学習します）：
例
<div class="btn-group">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">スマートフォン</a>
<a class="dropdown-item" href="#">タブレット</a>
</div>
</div>
</div>
