コーディングを少しでも早くしたい!
ということで、Bootstrapでよく使うクラスをまとめました。
Bootstrapは便利ですね。
自分でクラスを作らなくていいのでコーディングが早くできます。
スポンサーリンク
テキスト関係
・文字色を変える
<p class='text-primary'>こんにちは</p>
text-secondary
text-success
text-danger
text-warning
text-info
・文字を中央に配置する
<p class='text-center'>こんにちは</p>
・文字を太くする
font-weight-bold
・文字を細くする(h2などあらかじめ太文字の設定がされているものに)
font-weight-normal
・大見出しにする(h1などの見出しタグよりも大きくなる)
display-4
ボタン
通常のボタン
btn btn-primary
小さいボタン
btn btn-info btn-sm
大きいボタン
btn btn-danger btn-lg
要素関係
・背景色
bg-primary
・サイズを変える
親要素に対して25%の幅にする
w-25
親要素に対して50%の高さにする
h-50
※親要素を定義しないと反映されないので注意!
よく使う色の名前
青 | primary |
---|---|
灰色 | secondary |
緑 | success |
赤 | danger |
黄色 | warning |
水色 | info |
スポンサーリンク