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-left、pull-right

pull-left、pull-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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍