Bootstrap tutorial logo

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

Wiadomość wysłana, Dziękuję!
Sprawdź pola formularza
Niektóre pola formularza są puste
Nie udało się wysłać wiadomości

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

Wiadomość wysłana, Dziękuję!
Sprawdź pola formularza
Niektóre pola formularza są puste
Nie udało się wysłać wiadomości

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

Wiadomość wysłana, Dziękuję! Czytaj więcej
Sprawdź pola formularza INFO
Niektóre pola formularza są puste FAQ
Nie udało się wysłać wiadomości Zgłoś błąd

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ładami
Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (1 głosów, średnia: 5,00 na 5)
Loading...

Oliwier 1 lutego 2016 o 17:13

Dobra jest html, a css gdzie ? :<

Odpowiedz
Bartek 17 kwietnia 2016 o 10:55

Witam,
próbowałem utworzyć komunikat z możliwością zamknięcia i wszystko jest ok oprócz tego, że po naciśnięciu „krzyżyka” div się nie zamyka. Trzeba jeszcze napisać coś w php ?
Z góry dziękuje za odpowiedź…

Odpowiedz