Alerty / Alerts

3 732 0

Przechodzimy do kolejnego etapu poznawania Bootstrapa. Poznaliśmy już responsywną siatkę oraz dowiedzieliśmy się jak operować na tekstach i obrazach. Kolejnym krokiem są gotowe komponenty przygotowane przez twórców frameworka. Komponenty te składają się z mieszanki kodu HTML i klas CSS a czasami wymagają także użycia JSa.

Pierwszym z nich będzie element „Alert”, który służy nam do wplecenia w treść strony jakiegoś komunikatu czy dodatkowej informacji. Alerty mają swoje klasy kontekstowe czyli odpowiednie kolory dzięki którym nawet przez przeczytaniem zawartości będziemy przypuszczać o co chodzi.

Podstawowy przykład

Składnia HTML podstawowego alertu jest bardzo prosta, wystarczy div z klasą .alert oraz klasą .alert-* gdzie pod * podstawimy primary, secondary, success, danger, warning, info, light, dark, w zależności od tego jaki kontekst czy kolor elementu chcemy uzyskać. W poniższym przykładzie odpowiednie klasy zostały pogrubione.

Przykład

Kod


Alert z linkiem

Może zajść taka potrzeba, że musimy w naszym alercie umieścić link. Może to być link do opisu błędu, regulaminu, strony logowania itp. Aby nasz link był ładnie ostylowany musimy nadać mu klasę .alert-link. Kolory, podobnie jak w powyższym przykładzie nadajemy za pomocą odpowiednich klas.

Przykład

Kod


Alert z dodatkową treścią

Nasz alert nie musi być ograniczony do jednej linijki. Możemy umieścić w nim większy tytuł a także kilka paragrafów. Gdy zdecydujemy się na użycie znacznika nagłówka czyli przykładowo <h1> musimy nadać mu klasę .alert-heading. Aby w naszym alercie stworzyć coś w rodzaju oddzielonej stopki to korzystamy z elementu <hr> Gdy zdecydujemy się na korzystanie z paragrafów to należy pamiętać by ostatniemu z nich nadać klasę .mb-0, która ma za zadanie usunięcie dolnego marginesu. Musimy to zrobić gdyż domyślnie Bootstrap dodaje ów margines do paragrafów i nasz alert nie byłby „równy”.

Przykład

Kod


Alert z zamykaniem

Zwykle z komunikatami jest tak, że albo same zanikają albo mają możliwość ich zamknięcia. Twórcy Bootstrapa skorzystali tutaj z biblioteki, która umożliwia zamykanie naszych komunikatów za pomocą przycisku. Aby skorzystać z tej funkcjonalności należy wykonać kilka czynności:

  • Naszemu alertowi musimy dodać klasę .alert-dismissible
  • Opcjonalnie, gdy chcemy by alert zanikał płynnie a nie znikał od razu, dodajemy klasy .fade oraz .show
  • Wewnątrz alertu musimy umieścić button z atrybutem data-dismiss="alert"

Przykład

Kod


Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (15 głosów, średnia: 4,40 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*