Source

Varningar

Ge kontextuella feedbackmeddelanden för typiska användaråtgärder med en handfull tillgängliga och flexibla varningsmeddelanden.

Exempel

Varningar är tillgängliga för alla textlängder, samt en valfri avvisande knapp. För korrekt stil, använd en av de åtta obligatoriska kontextuella klasserna (t.ex. .alert-success). För inline avvisning, använd alerts jQuery plugin .

<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>
Att förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Använd .alert-linkverktygsklassen för att snabbt tillhandahålla matchande färgade länkar i alla varningar.

<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>

Ytterligare innehåll

Varningar kan också innehålla ytterligare HTML-element som rubriker, stycken och avdelare.

<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>

Avvisar

Med hjälp av alert JavaScript-plugin, är det möjligt att avvisa alla varningar inline. Här är hur:

  • Se till att du har laddat varningsplugin, eller det kompilerade Bootstrap JavaScript.
  • Om du bygger vårt JavaScript från källan kräverutil.js det . Den kompilerade versionen innehåller detta.
  • Lägg till en avvisningsknapp och .alert-dismissibleklassen, som lägger till extra utfyllnad till höger om varningen och placerar .closeknappen.
  • På avvis-knappen lägger du till data-dismiss="alert"attributet som utlöser JavaScript-funktionen. Se till att använda <button>elementet med det för korrekt beteende på alla enheter.
  • För att animera varningar när du avvisar dem, se till att lägga till .fadeklasserna och .show.

Du kan se detta i aktion med en livedemo:

<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>

JavaScript-beteende

Utlösare

Aktivera avvisande av en varning via JavaScript:

$('.alert').alert()

Eller med dataattribut på en knapp i varningen , som visas ovan:

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

Observera att om du stänger en varning tas den bort från DOM.

Metoder

Metod Beskrivning
$().alert() Får en varning att lyssna efter klickhändelser på underordnade element som har data-dismiss="alert"attributet. (Inte nödvändigt när du använder data-API:s automatiska initiering.)
$().alert('close') Stänger en varning genom att ta bort den från DOM. Om klasserna .fadeoch .showfinns på elementet kommer varningen att tona ut innan den tas bort.
$().alert('dispose') Förstör ett elements varning. 
$('.alert').alert('close')

evenemang

Bootstraps varningsplugin avslöjar några händelser för att koppla in varningsfunktioner.

Händelse Beskrivning
close.bs.alert Denna händelse aktiveras omedelbart när closeinstansmetoden anropas.
closed.bs.alert Den här händelsen utlöses när varningen har stängts (väntar på att CSS-övergångar ska slutföras). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})