「増補改訂版Bootstrap4入門」アラート【Udemyで学習】
このレクチャーではBootstrap4の「アラート・コンポーネント」ついて説明します。
div要素にalertクラスとalert-{コンテキスト・カラー}を付与することで、メッセージ表示に適切なアラート・コンポーネントを表示することができます。スライドでご覧の通り、alert-primaryやalert-successなど、指定したalert-{コンテキスト・カラー}クラスによって背景色が決定します。
アラート内のアンカー要素にalert-linkクラスを適用することで、アラートメッセージの背景色でも見やすい色のリンクテキストを表示します。背景色によってリンク文字列が見えづらくなるのを防ぐことができます。
また、アラート内のヘディング要素などにalert-headingクラスを適用することで、少し大きな文字で、アラートの見出しを表示します。
アラート内に設置したバツボタンをクリックすることでアラートコンポーネントを消すことができます。スライドでご覧のとおり、div要素にalert-dismissibleクラスを、button要素にdata-dismiss="alert"属性を適用します。この組み合わせでbuttonをクリックしたとき、alertクラスが含まれるブロック要素が消える動作をします。fade showクラスを追加すると若干の残像付きで消える動作をします。
では、デモをご覧いただきます。
はじめはいろいろなコンテキスト・カラーのアラートです。どのコンテキスト・カラーも優しい色合いでウケがいいと思います。
次は、alert-linkクラス付きのアラート・コンポーネントです。ピンクのalert-dangerクラスではリンク文字がえんじ色、一番下のalert-darkクラスではリンク文字が黒になっていることで確認できます。
次は、alert-headingクラス付きのアラート・コンポーネントです。alert-headingクラスを適用したh4要素の文字色が濃い緑色であることが確認できます。
最後は、閉じることができるアラート・コンポーネントです。バツのリンクをクリックすることでアラート・コンポーネントが消えました。fade showのアニメーション効果はよくわかりませんね。
以上で「アラート・コンポーネント」の説明を終わります。次のレクチャーでは「バッジ・コンポーネント」の説明をします。
★★★ 続きはUdemyで ★★★
https://www.udemy.com/bootstrap4_for_developer_2
★★★ コース内でお逢いできることを楽しみにしています。 ★★★
