autor: Robert
Odkąd Internet nie tylko serwuje treści ale umożliwia „interakcję” z użytkownikiem, nieodzownym elementem są wszelkiej maści powiadomienia. Dostajemy informację o wysłaniu maila, o dodaniu produktu do koszyka, o poprawnie wykonanym przelewie bankowym itp.
Bootstrap udostępnia 3 rodzaje powiadomień, które można wykorzystać na swojej stronie.
Jest to zwykły div z zadanym przez nas kolorem tła, który może się pojawiać np. po wysłaniu maila
Tworząc takie powiadomienie tworzymy div z klasą .alert
oraz wybranym przez nas kolorem (nazwy jak w przypadku buttonów: info, warning, danger, success) .alert-success
Podobnie jak powyżej mamy możliwość zdefiniowania koloru tła, dodatkowo tworząc przycisk umożliwiający zamknięcie okna
Tutaj musimy do dwóch klas które stworzyliśmy w poprzednim przypadku dodać jeszcze klasę .alert-dismissable
a wewnątrz diva umieścić kod przycisku, który wyświetli nam „X” służący do zamknięcia okna.
Oczywiście tekst powiadomienia może zawierać jakiś link, przykładowo do FAQ czy wyjaśnienia problemu
Aby stworzyć takie powiadomienie, najpierw stosujemy kod z 1 przykładu a wewnątrz diva robimy „anchor” z klasą .alert-link
No i stronka z przykładem:
Strona z przykładamiPrzecież Bootstrap jest zbiorem reguł CSS a ten kurs o nim opowiada:) Zachęcam do zapoznania się z postem -> https://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Odpowiedz