Gå til hovedinnhold Hopp til dokumentnavigering
Check
in English

Varsler

Gi kontekstuelle tilbakemeldingsmeldinger for typiske brukerhandlinger med en håndfull tilgjengelige og fleksible varslingsmeldinger.

På denne siden

Eksempler

Varsler er tilgjengelige for alle tekstlengder, samt en valgfri lukkeknapp. For riktig styling, bruk en av de åtte nødvendige kontekstuelle klassene (f.eks. .alert-success). For innebygd avvisning, bruk JavaScript-pluginen for varsler .

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 hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.

Levende eksempel

Klikk på knappen nedenfor for å vise et varsel (skjult med innebygde stiler for å starte), og avvis (og ødelegge) det med den innebygde lukkeknappen.

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

Vi bruker følgende JavaScript for å utløse vår live varslingsdemo:

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

Bruk .alert-linkverktøyklassen for raskt å gi matchende fargede lenker i ethvert varsel.

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>

Ytterligere innhold

Varsler kan også inneholde flere HTML-elementer som overskrifter, avsnitt 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åte kan du bruke flexbox-verktøy og Bootstrap-ikoner for å lage varsler med ikoner. Avhengig av ikonene og innholdet ditt, vil du kanskje legge til flere verktøy eller egendefinerte stiler.

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>

Trenger du mer enn ett ikon for varslene dine? Vurder å bruke flere Bootstrap-ikoner og lage en lokal SVG-sprite slik at du enkelt kan referere til de samme ikonene gjentatte ganger.

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>

Avviser

Ved å bruke JavaScript-plugin-modulen for varsel, er det mulig å avvise alle inline-varsler. Dette er hvordan:

  • Pass på at du har lastet inn varslingsplugin, eller det kompilerte Bootstrap JavaScript.
  • Legg til en lukkeknapp og .alert-dismissibleklassen, som legger til ekstra polstring til høyre for varselet og plasserer lukkeknappen.
  • På lukkeknappen legger du til data-bs-dismiss="alert"attributtet, som utløser JavaScript-funksjonaliteten. Sørg for å bruke <button>elementet med det for riktig oppførsel på alle enheter.
  • For å animere varsler når du avviser dem, sørg for å legge til .fadeklassene og .show.

Du kan se dette i aksjon 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 et varsel avvises, fjernes elementet fullstendig fra sidestrukturen. Hvis en tastaturbruker avviser varselet ved å bruke lukkeknappen, vil fokuset plutselig mistes og, avhengig av nettleseren, tilbakestilles til begynnelsen av siden/dokumentet. Av denne grunn anbefaler vi å inkludere ekstra JavaScript som lytter etter closed.bs.alerthendelsen og programmerer focus()den mest passende plasseringen på siden. Hvis du planlegger å flytte fokus til et ikke-interaktivt element som normalt ikke mottar fokus, sørg for å legge tabindex="-1"til elementet.

CSS

Variabler

Lagt til i v5.2.0

Som en del av Bootstraps utviklende tilnærming til CSS-variabler, bruker varsler nå lokale CSS-variabler .alertfor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

  --#{$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 variabler

$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

Sass blanding

Brukes i kombinasjon med $theme-colorsfor å lage kontekstuelle modifikasjonsklasser for varslene våre.

@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

Sløyfe som genererer modifikatorklassene 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-adferd

Initialiser

Initialiser elementer som varsler

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

For det eneste formålet å avvise et varsel, er det ikke nødvendig å initialisere komponenten manuelt via JS API. Ved å bruke data-bs-dismiss="alert", vil komponenten bli initialisert automatisk og riktig avvist.

Se utløserdelen for mer informasjon.

Utløsere

Avvisning kan oppnås med dataattributtet på en knapp i varselet som vist nedenfor:

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

eller på en knapp utenfor varselet ved å bruke data-bs-targetsom vist nedenfor:

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

Merk at lukking av et varsel vil fjerne det fra DOM.

Metoder

Du kan opprette en varselforekomst med varselkonstruktøren, for eksempel:

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

Dette får et varsel til å lytte etter klikkhendelser på etterkommere elementer som har data-bs-dismiss="alert"attributtet. (Ikke nødvendig når du bruker data-APIs automatiske initialisering.)

Metode Beskrivelse
close Lukker et varsel ved å fjerne det fra DOM. Hvis klassene .fadeog .shower til stede på elementet, vil varselet tone ut før det fjernes.
dispose Ødelegger et elements varsling. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode som lar deg få varselforekomsten knyttet til et DOM-element. For eksempel: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Statisk metode som returnerer en varselforekomst knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik: bootstrap.Alert.getOrCreateInstance(element).

Grunnleggende bruk:

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

arrangementer

Bootstraps varslingsplugin avslører noen få hendelser for å koble til varslingsfunksjonalitet.

Begivenhet Beskrivelse
close.bs.alert Avfyres umiddelbart når closeinstansmetoden kalles.
closed.bs.alert Utløses når varselet er lukket og CSS-overganger er fullfø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()
})