Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
Check
in English

upozorenja

Omogućite kontekstualne povratne poruke za tipične radnje korisnika s nekoliko dostupnih i fleksibilnih poruka upozorenja.

Na ovoj stranici

Primjeri

Dostupna su upozorenja za bilo koju duljinu teksta, kao i izborni gumb za zatvaranje. Za pravilan stil koristite jednu od osam potrebnih kontekstualnih klasa (npr. .alert-success). Za inline odbacivanje upotrijebite JavaScript dodatak za upozorenja .

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>
Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .visually-hiddenklasom.

Živi primjer

Pritisnite donji gumb za prikaz upozorenja (skrivenog s ugrađenim stilovima za početak), zatim ga odbacite (i uništite) pomoću ugrađenog gumba za zatvaranje.

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

Koristimo sljedeći JavaScript za pokretanje naše demonstracije upozorenja uživo:

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

Upotrijebite .alert-linkklasu pomoćnih programa za brzo pružanje odgovarajućih veza u boji unutar bilo kojeg upozorenja.

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>

Dodatni sadržaj

Upozorenja također mogu sadržavati dodatne HTML elemente kao što su naslovi, odlomci i razdjelnici.

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

Slično, možete koristiti flexbox pomoćne programe i Bootstrap ikone za stvaranje upozorenja s ikonama. Ovisno o vašim ikonama i sadržaju, možda ćete htjeti dodati više uslužnih programa ili prilagođenih stilova.

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>

Trebate više od jedne ikone za svoja upozorenja? Razmislite o korištenju više Bootstrap ikona i izradi lokalnog SVG spritea na taj način kako biste jednostavno 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>

Odbacivanje

Korištenjem JavaScript dodatka za upozorenje, moguće je odbaciti bilo koje upozorenje u tekstu. Evo kako:

  • Provjerite jeste li učitali dodatak upozorenja ili kompilirani Bootstrap JavaScript.
  • Dodajte gumb za zatvaranje i .alert-dismissibleklasu, koja dodaje dodatno ispunjavanje s desne strane upozorenja i postavlja gumb za zatvaranje.
  • Na gumb za zatvaranje dodajte data-bs-dismiss="alert"atribut koji pokreće JavaScript funkciju. Obavezno koristite <button>element s njim za ispravno ponašanje na svim uređajima.
  • Da biste animirali upozorenja kada ih odbacujete, svakako dodajte .fadei .showklase.

Ovo možete vidjeti na djelu uz demo už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>
Kada se upozorenje odbaci, element se potpuno uklanja iz strukture stranice. Ako korisnik tipkovnice odbaci upozorenje pomoću gumba za zatvaranje, njegov fokus će se odjednom izgubiti i, ovisno o pregledniku, vratiti se na početak stranice/dokumenta. Iz tog razloga preporučujemo uključivanje dodatnog JavaScripta koji osluškuje closed.bs.alertdogađaj i programski postavlja focus()najprikladnije mjesto na stranici. Ako planirate premjestiti fokus na neinteraktivan element koji inače ne prima fokus, svakako dodajte tabindex="-1"elementu.

CSS

Varijable

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, upozorenja sada koriste lokalne CSS varijable .alertza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

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

$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

Koristi se u kombinaciji sa $theme-colorsza stvaranje klasa kontekstualnog modifikatora za naša upozorenja.

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

Petlja koja generira klase modifikatora s 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);
  }
}

JavaScript ponašanje

Inicijalizirati

Inicijalizirajte elemente kao upozorenja

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

Isključivo u svrhu odbacivanja upozorenja, nije potrebno ručno inicijalizirati komponentu putem JS API-ja. Korištenjem data-bs-dismiss="alert", komponenta će se automatski pokrenuti i ispravno odbaciti.

Za više pojedinosti pogledajte odjeljak okidača .

Okidači

Odbacivanje se može postići dataatributom na gumbu unutar upozorenja kao što je prikazano u nastavku:

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

ili na gumb izvan upozorenja koristeći data-bs-targetkako je prikazano u nastavku:

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

Imajte na umu da će zatvaranje upozorenja ukloniti ono iz DOM-a.

Metode

Možete stvoriti instancu upozorenja pomoću konstruktora upozorenja, na primjer:

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

Time upozorenje osluškuje događaje klikova na elementima potomcima koji imaju data-bs-dismiss="alert"atribut. (Nije potrebno kada se koristi auto-inicijalizacija data-api-ja.)

metoda Opis
close Zatvara upozorenje uklanjanjem iz DOM-a. Ako su klase .fadei .showprisutne na elementu, upozorenje će nestati prije nego što se ukloni.
dispose Uništava upozorenje elementa. (Uklanja pohranjene podatke na DOM elementu)
getInstance Statička metoda koja vam omogućuje da dobijete instancu upozorenja pridruženu DOM elementu. Na primjer: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Statička metoda koja vraća instancu upozorenja pridruženu DOM elementu ili stvara novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: bootstrap.Alert.getOrCreateInstance(element).

Osnovna uporaba:

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

Događaji

Bootstrapov dodatak za uzbunu izlaže nekoliko događaja za spajanje na funkciju upozorenja.

Događaj Opis
close.bs.alert Odmah se aktivira kada closese pozove metoda instance.
closed.bs.alert Aktivira se kada je upozorenje zatvoreno i CSS prijelazi dovrš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()
})