Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
Check
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 .

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>
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 (za začetek skrito z vgrajenimi slogi), nato pa ga opustite (in uničite) z vgrajenim gumbom za zapiranje.

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

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

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

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>

Dodatne vsebine

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

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>

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.

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>

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

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>

Odpuščanje

Z uporabo vtičnika JavaScript za opozorila je možno opustiti vsako opozorilo v vrstici. Takole:

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

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>
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 premakniti fokus na neinteraktiven element, ki običajno ne prejme fokusa, dodajte tabindex="-1"elementu.

CSS

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS zdaj opozorila uporabljajo lokalne spremenljivke CSS .alertza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

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

Sass mixin

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

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

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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

Primerek opozorila lahko ustvarite s konstruktorjem opozoril, na primer:

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

Zaradi tega opozorilo posluša dogodke klikov na podrejenih elementih, ki imajo data-bs-dismiss="alert"atribut. (Ni potrebno pri uporabi samodejne inicializacije data-api.)

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čna metoda, ki vam omogoča pridobitev primerka opozorila, povezanega z elementom DOM. Na primer: 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).

Osnovna uporaba:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
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()
})