Boostrapでボタンを作るにはクラスに「btn」クラスとボタンの色を表現するクラス、サイズを表現するクラスを指定して作成します。
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でボタンの色、サイズ、表示状況、ボタングループを指定する方法でした。
