Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

Alerts

Obezbedite kontekstualne povratne poruke za tipične radnje korisnika uz pregršt dostupnih i fleksibilnih poruka upozorenja.

Na ovoj stranici

Primjeri

Upozorenja su dostupna za bilo koju dužinu teksta, kao i opciono dugme za zatvaranje. Za pravilan stil, koristite jednu od osam potrebnih kontekstualnih klasa (npr. .alert-success). Za inline otpuštanje koristite 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 pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hiddenklasom.

Živi primjer

Kliknite na dugme ispod da prikažete upozorenje (sakriveno umetnutim stilovima za početak), a zatim ga odbacite (i uništite) pomoću ugrađenog dugmeta za zatvaranje.

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

Koristimo sljedeći JavaScript da pokrenemo našu demonstraciju 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')
  })
}

Koristite .alert-linkuslužnu klasu da brzo pružite odgovarajuće veze 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 poput naslova, pasusa i razdjelnika.

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 uslužne programe i Bootstrap ikone za kreiranje upozorenja sa 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 vaša upozorenja? Razmislite o korišćenju više Bootstrap ikona i pravljenju lokalnog SVG sprite-a kako biste lako referencirali iste ikone više puta.

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

Koristeći JavaScript dodatak za upozorenje, moguće je odbaciti bilo koje upozorenje u tekstu. Evo kako:

  • Budite sigurni da ste učitali dodatak za upozorenje ili kompajlirani Bootstrap JavaScript.
  • Dodajte dugme za zatvaranje i .alert-dismissibleklasu, koja dodaje dodatno polje desno od upozorenja i pozicionira dugme za zatvaranje.
  • Na dugme za zatvaranje dodajte data-bs-dismiss="alert"atribut koji pokreće JavaScript funkcionalnost. Obavezno koristite <button>element s njim za pravilno ponašanje na svim uređajima.
  • Da biste animirali upozorenja kada ih odbacite, obavezno dodajte .fadei .showklase.

Ovo možete vidjeti u akciji 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 u potpunosti uklanja iz strukture stranice. Ako korisnik tastature odbaci upozorenje pomoću dugmeta za zatvaranje, njegov fokus će se iznenada izgubiti i, u zavisnosti od pretraživača, resetovati na početak stranice/dokumenta. Iz tog razloga preporučujemo uključivanje dodatnog JavaScripta koji sluša closed.bs.alertdogađaj i programski postavlja focus()na najprikladniju lokaciju na stranici. Ako planirate premjestiti fokus na neinteraktivni element koji obično ne prima fokus, obavezno dodajte tabindex="-1"elementu.

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, upozorenja sada koriste lokalne CSS varijable uključene .alertza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

  --#{$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 kreiranje klasa modifikatora konteksta 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 generiše klase modifikatora sa 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

Inicijaliziraj

Inicijalizirajte elemente kao upozorenja

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

Za jedinu svrhu odbacivanja upozorenja, nije potrebno inicijalizirati komponentu ručno preko JS API-ja. Korištenjem data-bs-dismiss="alert", komponenta će se automatski inicijalizirati i pravilno odbaciti.

Pogledajte odjeljak o okidačima za više detalja.

Okidači

Otpuštanje se može postići pomoću dataatributa na dugmetu unutar upozorenja kao što je prikazano u nastavku:

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

ili na dugme izvan upozorenja koristeći data-bs-targetkao što 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 iz DOM-a.

Metode

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

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

Ovo čini da upozorenje osluškuje događaje klika na elementima potomcima koji imaju data-bs-dismiss="alert"atribut. (Nije neophodno kada se koristi data-api auto-inicijalizacija.)

Metoda Opis
close Zatvara upozorenje uklanjanjem iz DOM-a. Ako su .fadei .showklase prisutne 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ćava da dobijete instancu upozorenja koja je povezana sa DOM elementom. Na primjer: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Statička metoda koja vraća instancu upozorenja pridruženu DOM elementu ili kreira novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: bootstrap.Alert.getOrCreateInstance(element).

Osnovna upotreba:

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

Događaji

Bootstrap dodatak za upozorenje izlaže nekoliko događaja za spajanje na funkcionalnost upozorenja.

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