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">Leftbutton>
<button type="button class=btn btn-secondary">Middlebutton>
<button type="button class=btn btn-secondary">Rightbutton>
div>

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

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

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

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

🚌 参考リンク

🖥 VULTRおすすめ

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

📚 おすすめの書籍