はじめに
ここでは、Bootstrapの基本的な利用方法について解説します。
スターターテンプレート
Bootstrapには、色々なデザインが用意されていますが、その大元となる「スターターテンプレート」があります。
よく使うデザイン
Jumbotron
ウェブページのヘッダーのテンプレートとして使いやすいデザインです。
https://getbootstrap.jp/docs/4.4/components/jumbotron/
Alerts
処理完了やエラーメッセージの表示に使えます。alert-のclass属性は、色の指定にも使えるので便利です。
https://getbootstrap.jp/docs/4.4/components/alerts/
Buttons
他のページへのリンクやフォームの送信ボタンなどに使えます。
こちらもbtn-successなどのクラス属性は、色を変える時に使えます。
https://getbootstrap.jp/docs/4.4/components/buttons/
Cards
ブログの記事一覧で個々の記事を表示したりするのに使えます。
https://getbootstrap.jp/docs/4.4/components/card/
Forms
新規登録や記事投稿などのフォームに使えます。
https://getbootstrap.jp/docs/4.4/components/forms/
Navbar
ヘッダー部分のメニューバーなどとして使えます。
https://getbootstrap.jp/docs/4.4/components/navbar/
Pagination
記事一覧ページなどのページネーションに使えます。
https://getbootstrap.jp/docs/4.4/components/pagination/
チートシート
Bootstrapのチートシートのページには、様々なデザインと、対応するコードがまとめられています。