Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Opozorila

Zagotovite kontekstualna povratna sporočila za tipična dejanja uporabnikov s peščico razpoložljivih in prilagodljivih opozorilnih sporočil.

Na tej strani

Primeri

Opozorila so na voljo za poljubno dolžino besedila, pa tudi izbirni gumb za zapiranje. Za pravilno oblikovanje uporabite enega od osmih zahtevanih kontekstualnih razredov (npr. .alert-success). Za zavrnitev v vrstici uporabite vtičnik za opozorila JavaScript .

<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>
Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.

Primer v živo

Kliknite spodnji gumb, da prikažete opozorilo (skrito z vgrajenimi slogi za začetek), nato pa ga opustite (in uničite) z vgrajenim gumbom za zapiranje.

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

Za sprožitev predstavitve opozoril v živo uporabljamo naslednji JavaScript:

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

Uporabite .alert-linkrazred pripomočkov za hitro zagotavljanje ujemajočih se barvnih povezav znotraj katerega koli opozorila.

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

Dodatne vsebine

Opozorila lahko vsebujejo tudi dodatne elemente HTML, kot so naslovi, odstavki in ločnice.

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

Ikone

Podobno lahko uporabite pripomočke flexbox in ikone Bootstrap za ustvarjanje opozoril z ikonami. Odvisno od vaših ikon in vsebine boste morda želeli dodati več pripomočkov ali slogov po meri.

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

Potrebujete več kot eno ikono za svoja opozorila? Razmislite o uporabi več ikon Bootstrap in izdelavi lokalnega sprita SVG, tako da boste zlahka ponavljali iste ikone.

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

Odpuščanje

Z uporabo vtičnika JavaScript za opozorila je mogoče opustiti katero koli opozorilo v vrstici. Evo kako:

  • Prepričajte se, da ste naložili vtičnik za opozorila ali preveden JavaScript Bootstrap.
  • Dodajte gumb za zapiranje in .alert-dismissiblerazred, ki doda dodatno oblazinjenje na desni strani opozorila in umesti gumb za zapiranje.
  • Na gumb za zapiranje dodajte data-bs-dismiss="alert"atribut, ki sproži funkcijo JavaScript. Ne pozabite uporabiti <button>elementa z njim za pravilno delovanje v vseh napravah.
  • Če želite animirati opozorila, ko jih opustite, dodajte razrede .fadein ..show

To lahko vidite v akciji s predstavitvijo v živo:

<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>
Ko je opozorilo opuščeno, je element popolnoma odstranjen iz strukture strani. Če uporabnik tipkovnice opusti opozorilo z gumbom za zapiranje, se njegov fokus nenadoma izgubi in se, odvisno od brskalnika, ponastavi na začetek strani/dokumenta. Zaradi tega priporočamo, da vključite dodaten JavaScript, ki posluša closed.bs.alertdogodek in se programsko nastavi focus()na najprimernejšo lokacijo na strani. Če nameravate fokus premakniti na neinteraktiven element, ki običajno ne prejme fokusa, dodajte tabindex="-1"elementu.

Sass

Spremenljivke

$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

Različica mixin

Uporablja se v kombinaciji z $theme-colorsza ustvarjanje razredov kontekstualnih modifikatorjev za naša opozorila.

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

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

Zanka

Zanka, ki generira modifikatorske razrede z alert-variant()mixinom.

// 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);
  }
}

obnašanje JavaScripta

Inicializiraj

Inicializirajte elemente kot opozorila

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

Z edinim namenom opustitve opozorila ni treba ročno inicializirati komponente prek API-ja JS. Z uporabo data-bs-dismiss="alert"se bo komponenta samodejno inicializirala in pravilno opustila.

Za več podrobnosti glejte razdelek o sprožilcih .

Sprožilci

Opustitev je mogoče doseči z dataatributom na gumbu znotraj opozorila , kot je prikazano spodaj:

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

ali na gumb zunaj opozorila z uporabo, data-bs-targetkot je prikazano spodaj:

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

Upoštevajte, da boste z zaprtjem opozorila odstranili iz DOM.

Metode

Metoda Opis
close Zapre opozorilo tako, da ga odstrani iz DOM. Če sta v elementu prisotna razreda .fadein .show, bo opozorilo zbledelo, preden bo odstranjeno.
dispose Uniči opozorilo elementa. (Odstrani shranjene podatke v elementu DOM)
getInstance Statično metodo, ki vam omogoča pridobitev primerka opozorila, povezanega z elementom DOM, jo lahko uporabite takole:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Statična metoda, ki vrne primerek opozorila, povezanega z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Dogodki

Bootstrapov vtičnik za opozorila razkriva nekaj dogodkov za priključitev na funkcijo opozorila.

Dogodek Opis
close.bs.alert Sproži se takoj, ko closese pokliče metoda primerka.
closed.bs.alert Sproži se, ko je bilo opozorilo zaprto in so prehodi CSS zaključeni. 
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()
})