WebフレームワークであるBootstrapを使うと簡単にボタンを設置することができます。
Bootstrapでは様々なスタイルのボタンが定義されているので使いこなせるようになればとても便利ですよ。
今回はBootstrapでボタンを設置する際のポイントを紹介します。
Bootstrapでボタンを使うポイント
Bootstrapでボタンを設置する場合はデフォルトで用意されている.btn
classを利用します。
.btn
classを<button>
タグに設定します。
なお、<a>
タグ、<input>
タグに設定することでもボタンにすることができます。
<a>
タグをボタンとして設定する場合は、
ブラウザにボタンであることを明示するためにrole="button"
を指定すると良いとBootstrapのドキュメントに書いてあります。
Bootstrapのbuttonについての公式ドキュメント(英語)
ここからは、Bootstrapのbuttonの様々な使い方のポイントについて、例を出しながら紹介します。
buttonのスタイルカラーを指定する
Bootstrapではボタンのデザインカラーが複数用意されています。
以下に例として全て例示します。
(Bootstrapらしく、例をレスポンシブにしてみました。ブラウザのサイズに応じてレイアウトが変わります。)
ノーマルカラーのボタン
反転カラーのボタン
buttonのサイズを指定する
ボタンのサイズは大きくする場合は.btn-lg
classを、小さくする場合は.btn-sm
classを利用できます。
また、親要素の幅いっぱいのボタンを設定するには.btn-block
classを指定します。
それぞれの例は以下の様になります。
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
例を見た方がわかりやすいです。
おわりに
Bootstrapでbuttonを使う際のポイントについて紹介しました。
覚えなくてはいけないことは多くないので簡単に利用出来ると思います。
Bootstrapを使っている人の役に立てたらうれしいです。