「増補改訂版Bootstrap4入門」バッジ【Udemyで学習】
このレクチャーではBootstrap4の「バッジ・コンポーネント」について説明します。
「バッジ・コンポーネント」はテキストなどの横に小さな数字や文字を付けるときに利用します。背景色が付くので、小さくても目立ちます。スライドでご覧の通り、h1要素やh2要素などのヘディング要素の中にspan要素でバッジを入れ込むとspan要素の外側、すなわちh1やh2などのヘディング要素の文字の大きさと同じ大きさのバッジが表示されます。バッチはbadgeクラスとbadge-{コンテキスト・カラー}クラスをセットで指定すること生成されます。スライドの例ではbadge-secondaryクラスを適用しているので、背景色がグレーのバッチが表示されています。
全てのコンテキスト・カラーのカラフルなバッチをご覧いただいています。badgeクラスとbadge-{コンテキスト・カラー}クラスに加えて、badge-pillクラスを追加することでバッチをピル型（カプセル型）にすることができます。また、アンカー要素にbadgeクラスとbadge-{コンテキスト・カラー}クラスを適用することで、リンクタイプのバッチが生成されます。この後のデモで、マウスオーバーさせると背景色が微妙に変化することを確認していただきます。
では、デモをご覧いただきます。
はじめは、いろいろなサイズのバッジコンポーネントです。ご覧のNewマークや数字など幅広く利用することができます。
次はいろいろなコンテキスト・カラーのバッチです。dangerのバッチの文字色は白ですが、warningのバッチの文字色は黒になっています。バッジは背景色によって適切な文字色が設定されます。
次は、ピル型のバッチです。角がさらに丸くなっています。
最後は、リンクタイプのバッチです。マウスオーバさせると背景色が微妙に変化し、リンクタイプであることを把握することができます。
以上で「バッジ・コンポーネント」の説明を終わります。次のレクチャーでは「ボタン・コンポーネント」の説明をします。
★★★ 続きはUdemyで ★★★
https://www.udemy.com/bootstrap4_for_developer_2
★★★ コース内でお逢いできることを楽しみにしています。 ★★★
