Bootstrap 5 覚え書き

これは個人的な覚え書きです。

はじめに

Bootstrapとは何か？

Boorstrapはスタイルシートのフレームワークです。
デザインの手間が省ける利点はありますが、個性が出ないという欠点があります。
バージョンによって書き方が大きく異なり、苦労することは多そうです。

文字列の右寄せ

文字を右に寄せるサンプルです。text-endで右寄せになります。me-5をつけないと右いっぱいに寄ってしまいます。
左寄せはtext-first、中央寄せはtext-centerです。

マージンとパディングでの位置調整

パディングpでは全周囲に空白を入れられます。
この例ではパディングと下にマージンをとっています。
マージンは上mt、下mb、左ms、右me、上下my、左右mxで入ります。

うまく動かない場合の検証

画面を右クリックして「検証」を選択します。
Elementsではパディングやマージンを可視化できます。
Stylesでは現在のスタイルやスタイルの上書を検証できます。

colは12分割されることになっています。
12を越えると次の行に移ります。
CardとCardの間にガターGuttersがあるので注意しましょう。

カードのヘッダー

カードはヘッダーとフッターを持ちます。

カードのフッター

カードのヘッダー

フッターのない中央寄せのカード

カード

これはボタンのサンプルです。リンクへとぶ

フォーム、ラジオボタン、チェックボックス

画面の横幅にあわせてサイズ調節をしています。

名前

性別

男性

女性

了承しますか？

了承

アイコンが使えます。
アイコンサイトへのリンクが必要です。

コンテナの幅は広がります。