Alerty / Alerts - Kurs / Tutorial Bootstrap 4

Sprawdź najnowszą wersję komponentu alert zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

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

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

Kod


<div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

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

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

This is a info alert with an example link. Give it a click if you like.

This is a light alert with an example link. Give it a click if you like.

This is a dark alert with an example link. Give it a click if you like.

Kod


<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

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

Gratulacje!

To jest trochę dłuższa wiadomość

Którą możesz umieścić w rozbudowanym elemencie „alert”

Jak widzisz, składa się ona z nagłówka, trzech paragrafów oraz czegoś w rodzaju stopki

Pamiętaj by w ostatnim paragrafie użyć klasy .mb-0 aby usunąć dolny margines

Kod


<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Gratulacje!</h4>
  <p>To jest trochę dłuższa wiadomość</p>
  <p>Którą możesz umieścić w rozbudowanym elemencie "alert"</p>
  <p>Jak widzisz, składa się ona z nagłówka, trzech paragrafów oraz czegoś w rodzaju stopki</p>
  <hr>
  <p class="mb-0">Pamiętaj by w ostatnim paragrafie użyć klasy .mb-0 aby usunąć dolny margines</p>
</div>

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

Uwaga! Jestem komunikatem, który możesz zamknąć.

Kod


<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Uwaga!</strong> Jestem komunikatem, który możesz zamknąć.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>