Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Alarmer

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

Op dëser Säit

Beispiller

Alarmer si verfügbar fir all Längt vum Text, souwéi en optionalen Zoumaache Knäppchen. Fir richteg Styling, benotzt eng vun den aacht erfuerderleche kontextuelle Klassen (zB .alert-success). Fir Inline Entloossung, benotzt den Alarm JavaScript 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>
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 .visually-hiddenKlass.

Live Beispill

Klickt op de Knäppchen hei ënnen fir eng Alarm ze weisen (verstoppt mat Inline Stiler fir unzefänken), entlooss (an zerstéiert) se dann mam agebaute Zoumaache Knäppchen.

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Mir benotze folgend JavaScript fir eis Live Alarm Demo auszeléisen:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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>

Ikonen

Ähnlech kënnt Dir Flexbox Utilities a Bootstrap Icons benotze fir Alarmer mat Ikonen ze kreéieren. Ofhängeg vun Ären Ikonen an Inhalt, wëllt Dir vläicht méi Utilities oder personaliséiert Stiler derbäisetzen.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Braucht Dir méi wéi eng Ikon fir Är Alarmer? Betruecht méi Bootstrap Icons ze benotzen an e lokale SVG Sprite ze maachen wéi sou fir einfach déiselwecht Ikonen ëmmer erëm ze referenzéieren.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</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.
  • Füügt en Zoumaache Knäppchen an d' .alert-dismissibleKlass, déi extra Polsterung op der rietser Säit vun der Alarm bäidréit a positionéiert den Zoumaache Knäppchen.
  • Op der zoumaachen Knäppchen füügt den data-bs-dismiss="alert"Attribut derbäi, 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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Wann eng Alarm entlooss gëtt, gëtt d'Element komplett aus der Säitstruktur geläscht. Wann e Keyboard Benotzer d'Alarm mat der Zoumaache Knäppchen entlooss, gëtt hire Fokus op eemol verluer an, ofhängeg vum Browser, op den Ufank vun der Säit/Dokument zréckgesat. Aus dësem Grond empfeelen mir zousätzlech JavaScript matzemaachen, deen no dem closed.bs.alertEvent lauschtert a programmatesch focus()op déi passendste Plaz op der Säit setzt. Wann Dir plangt de Fokus op en net-interaktivt Element ze réckelen, deen normalerweis kee Fokus kritt, gitt sécher un tabindex="-1"dat Element derbäi.

Sass

Variablen

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Variant Mixin

Benotzt a Kombinatioun mat $theme-colorsKontextmodifikateur Klassen fir eis Alarmer ze kreéieren.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Loop

Loop déi d'Modifier Klassen mam alert-variant()Mixin generéiert.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript Verhalen

Initialiséieren

Initialiséiere Elementer als Alarm

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Fir den eenzegen Zweck eng Alarm ze entloossen, ass et net néideg, de Komponent manuell iwwer d'JS API ze initialiséieren. Andeems Dir benotzt data-bs-dismiss="alert"gëtt, gëtt de Komponent automatesch initialiséiert a richteg entlooss.

Kuckt d' Ausléiser Sektioun fir méi Detailer.

Ausléiser

Entloossung kann erreecht ginn mat dem dataAttribut op engem Knäppchen an der Alarm wéi hei ënnen gewisen:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

oder op engem Knäppchen ausserhalb vun der Alarm mat der data-bs-targetwéi hei ënnen gewisen:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

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

Methoden

Method Beschreiwung
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.
dispose Zerstéiert d'Alarm vun engem Element. (läscht gespäichert Daten am DOM Element)
getInstance Statesch Method déi Iech erlaabt d'Alarminstanz mat engem DOM Element assoziéiert ze kréien, Dir kënnt et esou benotzen:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Statesch Method déi eng Alarminstanz zréckginn, déi mat engem DOM Element assoziéiert ass oder eng nei erstellt am Fall wou se net initialiséiert gouf. Dir kënnt et esou benotzen:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Evenementer

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

Event Beschreiwung
close.bs.alert Brennt direkt wann d' closeInstanzmethod genannt gëtt.
closed.bs.alert Entlooss wann d'Alarm zougemaach gouf an d'CSS Iwwergäng fäerdeg sinn. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})