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">
  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>
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 inny sposób, np. 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">
  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>

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…
})