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

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

スポンサーリンク

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

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

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

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

クラス名 ボタンの色
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>









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

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

クラス名 ボタンのサイズ
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>





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

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

クラス名 ボタンの表示状況
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でボタンの色、サイズ、表示状況、ボタングループを指定する方法でした。

タイトルとURLをコピーしました