Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check
in English

Upozornění

Poskytujte kontextové zprávy zpětné vazby pro typické akce uživatele pomocí několika dostupných a flexibilních výstražných zpráv.

Na této straně

Příklady

Upozornění jsou k dispozici pro libovolnou délku textu, stejně jako volitelné tlačítko Zavřít. Pro správný styl použijte jednu z osmi požadovaných kontextových tříd (např. .alert-success). Pro okamžité zrušení použijte plugin JavaScript pro upozornění .

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>
Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .visually-hiddentřídě.

Živý příklad

Kliknutím na tlačítko níže zobrazíte výstrahu (skrytou pomocí vložených stylů pro spuštění), poté ji zrušte (a zničte) pomocí vestavěného tlačítka Zavřít.

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

Ke spuštění živé ukázky upozornění používáme následující 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')
  })
}

Použijte .alert-linktřídu utility k rychlému poskytnutí odpovídajících barevných odkazů v rámci jakéhokoli upozornění.

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>

Další obsah

Upozornění mohou také obsahovat další prvky HTML, jako jsou nadpisy, odstavce a oddělovače.

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>

ikony

Podobně můžete použít nástroje flexbox a ikony Bootstrap k vytvoření výstrah s ikonami. V závislosti na vašich ikonách a obsahu můžete chtít přidat další nástroje nebo vlastní styly.

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>

Potřebujete více než jednu ikonu pro svá upozornění? Zvažte použití více ikon Bootstrap a vytvoření místního spritu SVG, abyste mohli snadno odkazovat na stejné ikony opakovaně.

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>

Propouštění

Pomocí pluginu JavaScriptu pro upozornění je možné zrušit jakékoli vložené upozornění. Zde je postup:

  • Ujistěte se, že jste načetli výstražný plugin nebo kompilovaný Bootstrap JavaScript.
  • Přidejte tlačítko Zavřít a .alert-dismissibletřídu, která přidá další odsazení napravo od upozornění a umístí tlačítko Zavřít.
  • Na tlačítku Zavřít přidejte data-bs-dismiss="alert"atribut, který spouští funkci JavaScript. Ujistěte se, že <button>prvek s ním používáte pro správné chování napříč všemi zařízeními.
  • Chcete-li animovat upozornění při jejich zavírání, nezapomeňte přidat třídy .fadea .show.

Můžete to vidět v akci s živou ukázkou:

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>
Po zrušení výstrahy je prvek zcela odstraněn ze struktury stránky. Pokud uživatel klávesnice zruší upozornění pomocí tlačítka Zavřít, jeho zaměření se náhle ztratí a v závislosti na prohlížeči se vrátí na začátek stránky/dokumentu. Z tohoto důvodu doporučujeme zahrnout další JavaScript, který naslouchá closed.bs.alertudálosti a programově nastavuje focus()nejvhodnější umístění na stránce. Pokud plánujete přesunout fokus na neinteraktivní prvek, který normálně fokus není, nezapomeňte tabindex="-1"prvek přidat.

CSS

Proměnné

Přidáno ve verzi 5.2.0

V rámci vyvíjejícího se přístupu Bootstrap proměnných CSS nyní výstrahy používají místní proměnné CSS .alertpro vylepšené přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$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 proměnné

$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

Používá se v kombinaci s $theme-colorsk vytváření tříd kontextových modifikátorů pro naše výstrahy.

@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 smyčka

Smyčka, která generuje třídy modifikátoru s alert-variant()mixinem.

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

Chování JavaScriptu

Inicializovat

Inicializovat prvky jako výstrahy

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

Pouze za účelem zrušení výstrahy není nutné komponentu inicializovat ručně prostřednictvím rozhraní JS API. Použitím data-bs-dismiss="alert", bude komponenta automaticky inicializována a řádně ukončena.

Další podrobnosti naleznete v části spouštěče .

Spouštěče

Odmítnutí lze dosáhnout pomocí dataatributu na tlačítku v rámci výstrahy , jak je ukázáno níže:

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

nebo na tlačítko mimo upozornění pomocí data-bs-targetníže uvedeného:

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

Všimněte si, že zavřením výstrahy ji odstraníte z DOM.

Metody

Instanci výstrahy můžete vytvořit pomocí konstruktoru výstrah, například:

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

Díky tomu bude upozornění naslouchat událostem kliknutí na podřízené prvky, které mají tento data-bs-dismiss="alert"atribut. (Není nutné při použití automatické inicializace rozhraní data-api.)

Metoda Popis
close Zavře upozornění jeho odstraněním z DOM. Pokud jsou na prvku přítomny třídy .fadea .show, výstraha před odstraněním zmizí.
dispose Zničí výstrahu prvku. (Odstraní uložená data v prvku DOM)
getInstance Statická metoda, která vám umožní získat instanci výstrahy spojenou s prvkem DOM. Například: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Statická metoda, která vrátí instanci výstrahy přidruženou k prvku DOM nebo vytvoří novou v případě, že nebyla inicializována. Můžete jej použít takto: bootstrap.Alert.getOrCreateInstance(element).

Základní použití:

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

Události

Zásuvný modul výstrah Bootstrap odhaluje několik událostí pro zapojení do funkce výstrah.

událost Popis
close.bs.alert Spustí se okamžitě při closevolání metody instance.
closed.bs.alert Spustí se po uzavření výstrahy a dokončení přechodů CSS. 
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()
})