Bootstrap 4チートシート


Bootstrap 4のチートシートです。

🗽 アラート的な文章のデコレーション:alert

alertは警告や通知の文章をデコレーションするためのCSSクラスです。

Bootstrapのアラート・通知のpreview

<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

🍮 ボタンのグルーピング:btn-group

btn-groupはボタンのグルーピングを行うCSSクラスです。

Bootstrapのbtn-groupのpreview

<div class="btn-group role=group" aria-label="Basic example">
<button type="button class=btn btn-secondary">Left</button>
<button type="button class=btn btn-secondary">Middle</button>
<button type="button class=btn btn-secondary">Right</button>
</div>

🗻 左寄せ・右寄せ:pull-leftpull-right

pull-leftpull-rightは要素を左寄せ、右寄せにするためのCSSクラスです。

Bootstrap4の左寄せ・右寄せクラス

<button type="button" class="btn btn-primary pull-left">pull-left</button>
<button type="button" class="btn btn-info pull-right">pull-right</button>

🎂 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍