Ostrzeżenia i powiadomienia / Alerts
autor: Robert
15 marca 2014
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.
Zwykłe powiadomienie
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
Powiadomienie z możliwością zamknięcia
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.
Powiadomienia z linkiem
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ładamiPost się przydał? Oceń go proszę.
(1 głosów, średnia: 5,00 na 5)
Loading...Komentarze: 4 komentarze
Robert 2 lutego 2016 o 07:56
Przecież 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