Source

Alerty

Dostarczaj kontekstowe komunikaty zwrotne dotyczące typowych działań użytkownika za pomocą kilku dostępnych i elastycznych komunikatów ostrzegawczych.

Przykłady

Alerty są dostępne dla dowolnej długości tekstu, a także opcjonalny przycisk odrzucania. W celu poprawnej stylizacji użyj jednej z ośmiu wymaganych klas kontekstowych (np .alert-success. ). W celu odrzucenia wbudowanego użyj wtyczki alerts jQuery .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Nadawanie znaczenia technologiom wspomagającym

Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w alternatywnych środkach, takich jak dodatkowy tekst ukryty z .sr-onlyklasą.

Użyj .alert-linkklasy narzędziowej, aby szybko udostępnić pasujące kolorowe linki w dowolnym alercie.

<div class="alert alert-primary" role="alert">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Dodatkowa zawartość

Alerty mogą również zawierać dodatkowe elementy HTML, takie jak nagłówki, akapity i separatory.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Odrzucanie

Korzystając z wtyczki alertów JavaScript, możliwe jest odrzucenie dowolnego alertu w tekście. Oto jak:

  • Upewnij się, że załadowałeś wtyczkę alertu lub skompilowany skrypt Bootstrap JavaScript.
  • Jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js to . Skompilowana wersja zawiera to.
  • Dodaj przycisk odrzucenia i .alert-dismissibleklasę, która dodaje dodatkowe wypełnienie po prawej stronie alertu i ustawia .closeprzycisk.
  • Na przycisku odrzuć dodaj data-dismiss="alert"atrybut, który uruchamia funkcjonalność JavaScript. Upewnij się, że używasz z <button>nim elementu, aby zapewnić prawidłowe działanie na wszystkich urządzeniach.
  • Aby animować alerty podczas ich odrzucania, pamiętaj o dodaniu klas .fadei ..show

Możesz to zobaczyć w akcji dzięki demonstracji na żywo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Zachowanie JavaScript

Wyzwalacze

Włącz odrzucanie alertu przez JavaScript:

$('.alert').alert()

Lub z dataatrybutami na przycisku w alercie , jak pokazano powyżej:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Pamiętaj, że zamknięcie alertu spowoduje jego usunięcie z DOM.

Metody

metoda Opis
$().alert() Sprawia, że ​​alert nasłuchuje zdarzeń kliknięcia na elementach potomnych, które mają ten data-dismiss="alert"atrybut. (Nie jest to konieczne w przypadku korzystania z automatycznej inicjalizacji interfejsu API danych).
$().alert('close') Zamyka alert, usuwając go z DOM. Jeśli klasy .fadei .showsą obecne w elemencie, alert zniknie, zanim zostanie usunięty.
$().alert('dispose') Niszczy alarm elementu. 
$(".alert").alert('close')

Wydarzenia

Wtyczka alertu Bootstrap udostępnia kilka zdarzeń, które można podłączyć do funkcji alertów.

Wydarzenie Opis
close.bs.alert To zdarzenie jest wyzwalane natychmiast po closewywołaniu metody wystąpienia.
closed.bs.alert To zdarzenie jest wywoływane po zamknięciu alertu (poczeka na zakończenie przejścia CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})