Source

Alarmer

Gitt kontextuell Feedback Messagen fir typesch Benotzeraktiounen mat der Handvoll verfügbaren a flexibelen Alarmmeldungen.

Beispiller

Alarmer si fir all Längt vum Text verfügbar, souwéi en optionalen Entlooss Knäppchen. Fir richteg Styling, benotzt eng vun den aacht erfuerderleche kontextuelle Klassen (zB .alert-success). Fir Inline Entloossung benotzt den Alarm jQuery Plugin .

<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>
Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Benotzt d' .alert-linkUtility-Klass fir séier passende faarweg Linken an all Alarm ze bidden.

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

Zousätzlech Inhalt

Alarmer kënnen och zousätzlech HTML Elementer enthalen wéi Rubriken, Abschnitter an Treiber.

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

Entlooss

Mat dem Alarm JavaScript Plugin ass et méiglech all Alarm inline ze entloossen. Hei ass wéi:

  • Gitt sécher datt Dir den Alarm Plugin gelueden hutt, oder de kompiléierte Bootstrap JavaScript.
  • Wann Dir eis JavaScript aus der Quell baut, brauchutil.js et . Déi kompiléiert Versioun enthält dëst.
  • Füügt en Entlooss Knäppchen an d' .alert-dismissibleKlass, déi extra Polsterung op der rietser Säit vun der Alarm bäidréit an de .closeKnäppchen positionéiert.
  • Op der Entlooss Knäppchen füügt den data-dismiss="alert"Attribut un, wat d'JavaScript Funktionalitéit ausléist. Vergewëssert Iech d' <button>Element domat ze benotzen fir entspriechend Verhalen iwwer all Apparater.
  • Fir Alarmer ze animéieren wann se entlooss ginn, gitt sécher d'Klassen ze .fadeaddéieren .show.

Dir kënnt dëst an Aktioun mat enger Live Demo gesinn:

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

Ausléiser

Aktivéiert d'Entloossung vun enger Alarm iwwer JavaScript:

$('.alert').alert()

Oder mat dataAttributer op engem Knäppche bannent der Alarm , wéi uewen bewisen:

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

Notéiert datt d'Schließung vun enger Alarm se aus der DOM ewechhëlt.

Methoden

Method Beschreiwung
$().alert() Maacht eng Alarm no Klickevenementer op Nokommen Elementer déi den data-dismiss="alert"Attribut hunn. (Net néideg wann Dir d'Auto-Initialiséierung vum Data-APi benotzt.)
$().alert('close') Schléisst eng Alarm andeems se se aus der DOM erofhuelen. Wann d' .fadeKlassen .showum Element präsent sinn, wäert d'Alarm verschwannen ier se ewechgeholl gëtt.
$().alert('dispose') Zerstéiert d'Alarm vun engem Element. 
$(".alert").alert('close')

Evenementer

Bootstrap's Alarm Plugin exponéiert e puer Eventer fir an d'Alarmfunktionalitéit unzekoppelen.

Event Beschreiwung
close.bs.alert Dëst Event brennt direkt wann d' closeInstanzmethod genannt gëtt.
closed.bs.alert Dëst Evenement gëtt ofgeléist wann d'Alarm zougemaach gouf (waart bis CSS Iwwergäng fäerdeg sinn). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})