WebフレームワークであるBootstrapを使うと簡単にボタンを設置することができます。
Bootstrapでは様々なスタイルのボタンが定義されているので使いこなせるようになればとても便利ですよ。
今回はBootstrapでボタンを設置する際のポイントを紹介します。
Bootstrapでボタンを使うポイント
Bootstrapでボタンを設置する場合はデフォルトで用意されている.btnclassを利用します。
.btnclassを<button>タグに設定します。
なお、<a>タグ、<input>タグに設定することでもボタンにすることができます。
<a>タグをボタンとして設定する場合は、
ブラウザにボタンであることを明示するためにrole="button"を指定すると良いとBootstrapのドキュメントに書いてあります。
Bootstrapのbuttonについての公式ドキュメント(英語)
ここからは、Bootstrapのbuttonの様々な使い方のポイントについて、例を出しながら紹介します。
buttonのスタイルカラーを指定する
Bootstrapではボタンのデザインカラーが複数用意されています。
以下に例として全て例示します。
（Bootstrapらしく、例をレスポンシブにしてみました。ブラウザのサイズに応じてレイアウトが変わります。）
ノーマルカラーのボタン
File: bootstrap-button-color.html
---------------------------------
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
反転カラーのボタン
File: bootstrap-button-outline-color.html
-----------------------------------------
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
buttonのサイズを指定する
ボタンのサイズは大きくする場合は.btn-lgclassを、小さくする場合は.btn-smclassを利用できます。
また、親要素の幅いっぱいのボタンを設定するには.btn-blockclassを指定します。
それぞれの例は以下の様になります。
File: bootstrap-button-size.html
--------------------------------
<button type="button" class="btn btn-primary">ノーマルボタン</button>
<button type="button" class="btn btn-primary btn-lg">ラージボタン</button>
<button type="button" class="btn btn-primary btn-sm">スモールボタン</button>
<button type="button" class="btn btn-primary btn-block">ブロックボタン</button>
buttonのアクティブ、非アクティブを設定する
ボタンの活性、非活性ももちろん簡単に設定できます。
ただ、ちょっとしたブログやサイトではあまり使用するケースは少ないかもしれませんね。
File: bootstrap-button-active.html
----------------------------------
<button type="button" class="btn btn-primary">ノーマルボタン</button>
<button type="button" class="btn btn-primary active" >アクティブボタン</button>
<button type="button" class="btn btn-primary disabled" >非アクティブボタン</button>
buttonの余白を設定する
Bootstrapのbuttonにはデフォルトでpaddingの設定がされています。
デフォルトのままで十分ですが、自分でカスタマイズしたい場合にはBootstrapに用意されているpaddingの設定を利用しましょう。
.p{sides}-{size}classでpaddingの設定ができます。
{size}は0から5を指定してpaddingの大きさを指定できます。
{sides}は以下が指定できます。
- t : top
- b : bottom
- l : left
- r : right
- x : left と right
- y : top と bottom
- 指定なし : top と bottom と left と right
例を見た方がわかりやすいです。
File: bootstrap-button-padding.html
-----------------------------------
<button type="button" class="btn btn-primary">ノーマルボタン</button>
<button type="button" class="btn btn-primary p-5">p-5</button>
<button type="button" class="btn btn-primary px-0">px-0</button>
<button type="button" class="btn btn-primary py-0">py-0</button>
<button type="button" class="btn btn-primary pt-5 pb-4 pl-0">pt-5 pb-4 pl-0</button>
おわりに
Bootstrapでbuttonを使う際のポイントについて紹介しました。
覚えなくてはいけないことは多くないので簡単に利用出来ると思います。
Bootstrapを使っている人の役に立てたらうれしいです。
