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ładami

---

Post się przydał? Oceń go proszę.

(1 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Miniaturki zdjęć / Thumbnails
Nowszy post →
Paski postępu / Progress bars

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

Oliwier 3 lutego 2016 o 21:34

Dziękuje :)

Odpowiedz