Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Advarsler

Giv kontekstuelle feedbackmeddelelser til typiske brugerhandlinger med den håndfuld tilgængelige og fleksible advarselsmeddelelser.

På denne side

Eksempler

Advarsler er tilgængelige for enhver tekstlængde, såvel som en valgfri lukkeknap. For korrekt styling skal du bruge en af ​​de otte nødvendige kontekstuelle klasser (f.eks. .alert-success). Til inline afvisning skal du bruge advarslers JavaScript-plugin .

html 
<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>
Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hiddenklassen.

Levende eksempel

Klik på knappen nedenfor for at vise en advarsel (skjult med inline-stile for at starte), og afvis derefter (og ødelægge) den med den indbyggede lukkeknap.

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

Vi bruger følgende JavaScript til at udløse vores live alarmdemo:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Brug .alert-linkværktøjsklassen til hurtigt at give matchende farvede links inden for enhver advarsel.

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

Yderligere indhold

Advarsler kan også indeholde yderligere HTML-elementer som overskrifter, afsnit og skillelinjer.

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

Ikoner

På samme måde kan du bruge flexbox-værktøjer og Bootstrap-ikoner til at oprette alarmer med ikoner. Afhængigt af dine ikoner og indhold vil du måske tilføje flere hjælpeprogrammer eller brugerdefinerede stilarter.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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>

Har du brug for mere end ét ikon til dine underretninger? Overvej at bruge flere Bootstrap-ikoner og lave en lokal SVG-sprite som sådan for nemt at referere til de samme ikoner gentagne gange.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Afviser

Ved at bruge advarsels-JavaScript-plugin'et er det muligt at afvise enhver inline-advarsel. Sådan gør du:

  • Sørg for, at du har indlæst advarselsplugin'et eller det kompilerede Bootstrap JavaScript.
  • Tilføj en lukkeknap og .alert-dismissibleklassen, som tilføjer ekstra polstring til højre for advarslen og placerer lukkeknappen.
  • På lukkeknappen skal du tilføje data-bs-dismiss="alert"attributten, som udløser JavaScript-funktionaliteten. Sørg for at bruge <button>elementet med det for korrekt adfærd på tværs af alle enheder.
  • For at animere advarsler, når du afviser dem, skal du sørge for at tilføje klasserne .fadeog ..show

Du kan se dette i aktion med en live demo:

html 
<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>
Når en advarsel afvises, fjernes elementet fuldstændigt fra sidestrukturen. Hvis en tastaturbruger afviser advarslen ved hjælp af lukkeknappen, vil deres fokus pludselig gå tabt og, afhængigt af browseren, nulstilles til starten af ​​siden/dokumentet. Af denne grund anbefaler vi at inkludere yderligere JavaScript, der lytter efter closed.bs.alertbegivenheden og programmæssigt indstiller focus()til den mest passende placering på siden. Hvis du planlægger at flytte fokus til et ikke-interaktivt element, der normalt ikke modtager fokus, skal du sørge for at tilføje tabindex="-1"til elementet.

CSS

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger advarsler nu lokale CSS-variabler .alerttil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass variable

$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

Fed blanding

Bruges i kombination med $theme-colorstil at skabe kontekstuelle modifikatorklasser til vores underretninger.

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

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

Sass loop

Loop, der genererer modifikatorklasserne med alert-variant()mixin.

// 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 adfærd

Initialiser

Initialiser elementer som advarsler

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Med det ene formål at afvise en advarsel, er det ikke nødvendigt at initialisere komponenten manuelt via JS API. Ved at bruge data-bs-dismiss="alert", vil komponenten blive initialiseret automatisk og korrekt afvist.

Se triggersektionen for flere detaljer.

Udløsere

Afvisning kan opnås med dataattributten på en knap i advarslen som vist nedenfor:

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

eller på en knap uden for advarslen ved at bruge data-bs-targetsom vist nedenfor:

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

Bemærk, at lukning af en underretning vil fjerne den fra DOM.

Metoder

Du kan oprette en advarselsforekomst med advarselskonstruktøren, for eksempel:

const bsAlert = new bootstrap.Alert('#myAlert')

Dette får en advarsel til at lytte efter klikhændelser på efterkommerelementer, som har data-bs-dismiss="alert"attributten. (Ikke nødvendigt, når du bruger data-API's automatiske initialisering.)

Metode Beskrivelse
close Lukker en advarsel ved at fjerne den fra DOM. Hvis klasserne .fadeog .shower til stede på elementet, vil advarslen fade ud, før den fjernes.
dispose Ødelægger et elements alarm. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode, som giver dig mulighed for at få advarselsforekomsten knyttet til et DOM-element. For eksempel bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Statisk metode, som returnerer en advarselsforekomst, der er knyttet til et DOM-element, eller opretter et nyt, hvis det ikke blev initialiseret. Du kan bruge det sådan her: bootstrap.Alert.getOrCreateInstance(element).

Grundlæggende brug:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Begivenheder

Bootstraps advarselsplugin afslører nogle få hændelser for at tilslutte sig advarselsfunktionalitet.

Begivenhed Beskrivelse
close.bs.alert Udløses med det samme, når closeinstansmetoden kaldes.
closed.bs.alert Udløses, når alarmen er blevet lukket, og CSS-overgange er gennemført. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})