Bootstrap5でボタンをグループ化する方法

ユーザーに送信、削除、キャンセルなどの特定のタスクを実行させたい場合、ボタンはWebサイトの重要な部分です。 ただし、ボタンをグループ化して一連のリンクされたアクションを表示する場合は、Bootstrap 5を使用して簡単に行うことができます。Bootstrap5を使用してボタンをグループ化する方法と、ボタングループのスタイルと配置の方法がこのブログにまとめられています。

ボタングループの作成方法

ボタンをグループ化する、またはグループ化されたボタンを水平方向に揃えるには、 .btn-グループクラス ボタンをラップするdivコンテナに。

HTML

コードスニペットは、グループ化された4つのボタンを生成します。各ボタンには、明確なパディング、水色の背景、白いテキストの色があります。

出力

.btn-groupクラスはボタンをグループ化するために使用されますが、デフォルトではこれらのボタングループを水平方向に配置します。

グループ化されたボタンを垂直に配置する方法

ボタンを垂直方向に揃えながらグループ化したい場合、Bootstrap 5は、このタスクをすぐに実行するクラス.btn-group-verticalを提供します。

HTML

ここでは、グループ化された4つのボタンが生成されます。さらに、これらのボタンは垂直方向になります。

出力

ボタングループは垂直方向に正常に配置されました。

グループ化されたボタンに特定のサイズを与える方法

ボタングループのサイズを上下に拡大するには、.btn-group-sm、.btn-group-md、.btn-group-lg、.btnなどのボタングループのサイズ設定に関連付けられたBootstrap5クラスを使用できます。 -group-xl。

HTML

このコードは、水平方向に整列した3つのボタングループを作成します。 最初のボタングループは大きいサイズ、2番目のボタングループは中サイズ、最後のボタングループは小さいサイズになります。

出力

Webサイト上の他のコンテンツをどのように配置したかに応じて、ボタングループのサイズを調整できます。

複数のボタングループをインラインで配置する方法

コンテナ内にいくつのボタングループを配置しても、これらはすべて自動的に水平方向に配置されます。 以下に、例を使用してボタングループのこのデフォルトの動作を示します。

HTML

上記のコードを適用すると、デフォルトでインラインに配置される2つのボタングループを生成できます。 必要に応じて、より多くのボタングループをインラインで配置できます。

出力

これは、複数のボタングループをインラインで整列させる方法です。

結論

Bootstrap 5を使用してボタンをグループ化するには、.btn-groupクラスを使用します。 このクラスは、ボタングループを生成するとともに、それらを水平方向に配置します。 一方、これらのグループを垂直方向に整列させるには、.btn-group-verticalクラスを使用します。 さらに、ボタングループに特定のサイズを指定したい場合は、.btn-sm、.btn-md、.btn-lgなどのさまざまなクラスを使用できます。これらのクラスを利用すると、ボタンを簡単に作成してスタイルを設定できます。グループ。