Hoppa till huvudinnehållet Hoppa till dokumentnavigering
Check
in English

Varningar

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

På den här sidan

Exempel

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

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>
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 .visually-hiddenklassen.

Levande exempel

Klicka på knappen nedan för att visa en varning (dold med inline-stilar för att starta), avvisa (och förstör) den sedan med den inbyggda stängningsknappen.

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

Vi använder följande JavaScript för att utlösa vår live alert-demo:

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

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

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>

Ytterligare innehåll

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

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å samma sätt kan du använda flexbox-verktyg och Bootstrap-ikoner för att skapa varningar med ikoner. Beroende på dina ikoner och innehåll kanske du vill lägga till fler verktyg eller anpassade stilar.

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>

Behöver du mer än en ikon för dina varningar? Överväg att använda fler Bootstrap-ikoner och skapa en lokal SVG-sprite som så för att enkelt referera till samma ikoner upprepade gånger.

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>

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.
  • Lägg till en stängningsknapp och .alert-dismissibleklassen, som lägger till extra utfyllnad till höger om varningen och placerar stängningsknappen.
  • Lägg till attributet på stängningsknappen data-bs-dismiss="alert", 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:

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 varning avvisas tas elementet bort helt från sidstrukturen. Om en tangentbordsanvändare avvisar varningen med stängningsknappen, kommer deras fokus plötsligt att försvinna och, beroende på webbläsaren, återställas till början av sidan/dokumentet. Av denna anledning rekommenderar vi att inkludera ytterligare JavaScript som lyssnar efter closed.bs.alerthändelsen och programmässigt ställer focus()in den lämpligaste platsen på sidan. Om du planerar att flytta fokus till ett icke-interaktivt element som normalt inte får fokus, se till att lägga tabindex="-1"till elementet.

CSS

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder varningar nu lokala CSS-variabler .alertför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

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

Används i kombination med $theme-colorsför att skapa kontextuella modifieringsklasser för våra varningar.

@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

Slinga som genererar modifieringsklasserna 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-beteende

Initiera

Initiera element som varningar

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

För det enda syftet att avvisa en varning är det inte nödvändigt att initiera komponenten manuellt via JS API. Genom att använda data-bs-dismiss="alert", kommer komponenten att initieras automatiskt och tas bort korrekt.

Se avsnittet om utlösare för mer information.

Utlösare

Avvisning kan uppnås med dataattributet på en knapp i varningen som visas nedan:

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

eller på en knapp utanför varningen med hjälp av data-bs-targetsom visas nedan:

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

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

Metoder

Du kan skapa en varningsinstans med varningskonstruktorn, till exempel:

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

Detta gör att en varning lyssnar efter klickhändelser på underliggande element som har data-bs-dismiss="alert"attributet. (Inte nödvändigt när du använder data-API:s automatiska initiering.)

Metod Beskrivning
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.
dispose Förstör ett elements varning. (Tar bort lagrad data på DOM-elementet)
getInstance Statisk metod som låter dig få varningsinstansen kopplad till ett DOM-element. Till exempel: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Statisk metod som returnerar en varningsinstans kopplad till ett DOM-element eller skapar en ny om den inte initierades. Du kan använda det så här: bootstrap.Alert.getOrCreateInstance(element).

Grundläggande användning:

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

evenemang

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

Händelse Beskrivning
close.bs.alert Avfyras omedelbart när closeinstansmetoden anropas.
closed.bs.alert Utlöst när larmet har stängts och CSS-övergångar har slutförts. 
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()
})