Ostrzeżenie Bootstrap 5

Ostrzeżenie

Bootstrap 5 oferuje prosty sposób tworzenia zaprojektowanych wstępnie komunikatów ostrzegawczych:

Okienka ostrzegawcze są tworzone za pomocą klasy .alert, po której następuje jedna z klas kontekstowych:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

Przykład

<div class="alert alert-success">
  <strong>Sukces!</strong> To okienko ostrzegawcze oznacza sukces lub pozytywną akcję.
</div>

Spróbuj sam

Link ostrzegawczy

Dodaj .alert-link Klasa dodawana do jakiegokolwiek linku w okienku ostrzegawczym, tworzy "matchowy link kolorowy":

Przykład

<div class="alert alert-success">
  <strong>Sukces!</strong> Powinieneś <a href="#" class="alert-link">przeczytać to wiadomość</a>.
</div>

Spróbuj sam

Zamknij ostrzeżenie

Aby zamknąć komunikat ostrzegawczy, dodaj .alert-dismissible Klasa dodawana do kontenera ostrzegawczego. Następnie dodaj class="btn-close" i data-bs-dismiss="alert" Dodaj do elementu linku lub przycisku (kiedy go klikniesz, okienko ostrzegawcze zniknie).

Przykład

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Sukces!</strong> To okienko ostrzegawcze oznacza sukces lub pozytywną akcję.
</div>

Spróbuj sam

Animacja okienka ostrzegawczego

.fade i .show Klasa dodawana przy zamknięciu komunikatu ostrzegawczego dodaje efekt wchłaniania i wypływania:

Przykład

<div class="alert alert-danger alert-dismissible fade show">

Spróbuj sam