Boostrap4でボタンの色、サイズ、表示状況、ボタングループを指定する方法

Boostrapでボタンを作るにはクラスに「btn」クラスとボタンの色を表現するクラス、サイズを表現するクラスを指定して作成します。

Boostrapでボタンを作成する方法
まとめ

Boostrapでボタンを作成する方法

Boostrapでボタンを作るにはクラスに「btn」クラスとボタンの色を表現するクラスとサイズを表現するクラスを指定して作成します。

ボタンの色を表現するクラス

ボタンの色を表現するクラスは以下の６種類が用意されています。

クラス名	ボタンの色
btn-default	白色
btn-primary	青系統の色
btn-success	緑系統の色
btn-info	薄い青系統の色
btn-warning	黄系統の色
btn-danger	薄い赤系統の色
btn-light	明るい色
btn-dark	暗い色
btn-link	リンクの色

以下はその表示例です。

<button class="btn btn-default">btn-default・黒系統のボタン</button>
<button class="btn btn-primary">btn-primary・青系統の色のボタン</button>
<button class="btn btn-success">btn-success・緑系統の色のボタン</button>
<button class="btn btn-info">btn-info・薄い青系統の色のボタン</button>
<button class="btn btn-warning">btn-warning・黄系統の色のボタン</button>
<button class="btn btn-danger">btn-danger・薄い赤系統の色のボタン</button>
<button class="btn btn-light">btn-light・明るい色</button>
<button class="btn btn-dark">btn-dark・暗い色</button>
<button class="btn btn-link">btn-link・リンクの色<</button>

ボタンのサイズを表現するクラス

ボタンのサイズを表現するクラスは以下の４種類が用意されています。

クラス名	ボタンのサイズ
btn-lg	通常より大きなサイズのボタン
btn-sm	通常より小さなサイズのボタン
btn-xs	極小サイズのボタン
btn-block	ブロック幅100%のボタン

以下はその表示例です。

<button class="btn btn-default btn-lg">btn-lg・常より大きなサイズのボタン</button>
<button class="btn btn-primary ">通常サイズのボタン</button>
<button class="btn btn-success btn-sm">btn-sm・通常より小さなサイズのボタン</button>
<button class="btn btn-warning btn-xs">btn-xs・極小サイズのボタン</button>
<button class="btn btn-danger  btn-block">btn-block・ブロック幅100%のボタン</button>

ボタンの表示状況を表現するクラス

ボタンの表示状況を表現するクラスは以下の２種類が用意されています。

クラス名	ボタンの表示状況
active	ボタンを押した時の状態
disabled	ボタンを使用不可にした時の状態

以下はその表示例です。

<button class="btn btn-default active">active・ボタンを押した時の状態</button>
<button class="btn btn-primary disabled">disabled・ボタンを使用不可にした時の状態</button>

ボタンをグループ化して表示するクラス

ボタンをグループ化して表示するクラス「btn-group」も種類が用意されています。
divタグのクラスに「btn-group」を指定して、ボタンをグループ化します。

以下はその表示例です。

<div class="btn-group">
<button class="btn btn-default">btn-default・黒系統のボタン</button>
<button class="btn btn-primary">btn-primary・青系統の色のボタン</button>
<button class="btn btn-success">btn-success・緑系統の色のボタン</button>
</div>

ボタンが横並びになります。

まとめ

Boostrapにはボタンに関する様々クラスが設定されており表現豊かなボタンが実装できるようになっています。

以上、Boostrap4でボタンの色、サイズ、表示状況、ボタングループを指定する方法でした。