Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Märguanded

Pakkuge tavapäraste kasutajatoimingute jaoks kontekstipõhiseid tagasisidesõnumeid käputäie saadaolevate ja paindlike hoiatusteadetega.

Sellel lehel

Näited

Hoiatused on saadaval mis tahes pikkusega teksti kohta, samuti valikuline sulgemisnupp. Õigeks stiiliks kasutage ühte kaheksast nõutavast kontekstiklassist (nt .alert-success). Tekstisiseseks loobumiseks kasutage märguannete JavaScripti pistikprogrammi .

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>
Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Elav näide

Hoiatuse kuvamiseks klõpsake alloleval nupul (alustamiseks siseste stiilidega peidetud), seejärel loobuge (ja hävitage) see sisseehitatud sulgemisnupu abil.

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

Reaalajas hoiatuse demo käivitamiseks kasutame järgmist JavaScripti:

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

Kasutage .alert-linkutiliitklassi, et kiiresti pakkuda sobivaid värvilisi linke mis tahes hoiatuses.

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>

Täiendav sisu

Märguanded võivad sisaldada ka täiendavaid HTML-elemente, nagu pealkirjad, lõigud ja jagajad.

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>

Ikoonid

Samamoodi saate ikoonidega hoiatuste loomiseks kasutada flexboxi utiliite ja Bootstrapi ikoone . Sõltuvalt teie ikoonidest ja sisust võite soovida lisada rohkem utiliite või kohandatud stiile.

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>

Kas vajate oma hoiatuste jaoks rohkem kui ühte ikooni? Kaaluge rohkemate Bootstrapi ikoonide kasutamist ja sarnase kohaliku SVG spraiti loomist, et samadele ikoonidele korduvalt viidata.

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>

Loobumine

Hoiatuse JavaScripti pistikprogrammi abil on võimalik kõigist märguannetest loobuda. Tehke järgmist.

  • Veenduge, et oleksite laadinud hoiatusplugina või kompileeritud Bootstrap JavaScripti.
  • Lisage sulgemisnupp ja .alert-dismissibleklass, mis lisab hoiatuse paremale küljele täiendava polsterduse ja asetab sulgemisnupu.
  • Lisage sulgemisnupul data-bs-dismiss="alert"atribuut, mis käivitab JavaScripti funktsiooni. Kasutage seda <button>elementi kindlasti kõigis seadmetes õigeks käitumiseks.
  • Märguannete animeerimiseks nendest loobumisel lisage kindlasti klassid .fadeja ..show

Näete seda reaalajas demo abil:

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>
Kui hoiatusest loobutakse, eemaldatakse element lehe struktuurist täielikult. Kui klaviatuurikasutaja sulgemisnupu abil hoiatusest loobub, kaob järsku tema fookus ja olenevalt brauserist lähtestatakse lehe/dokumendi algusesse. Sel põhjusel soovitame lisada täiendava JavaScripti, mis kuulab closed.bs.alertsündmust ja seab programmiliselt focus()lehel kõige sobivama asukoha. Kui kavatsete viia fookuse mitteinteraktiivsele elemendile, mis tavaliselt ei fookusta, lisage tabindex="-1"element kindlasti.

CSS

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad hoiatused nüüd kohalikke CSS-i muutujaid, .alertet täiustada reaalajas kohandamist. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

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

Sassi muutujad

$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

Kasutatakse koos $theme-colorsmeie hoiatuste kontekstimuutusklasside loomiseks.

@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%);
  }
}

Sassi silmus

Silmus, mis genereerib koos alert-variant()mixiniga modifikaatoriklassid.

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

JavaScripti käitumine

Initsialiseeri

Initsialiseerige elemendid hoiatustena

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

Ainuüksi hoiatusest loobumise eesmärgil ei ole vaja komponenti JS API kaudu käsitsi lähtestada. Kasutades data-bs-dismiss="alert", lähtestatakse komponent automaatselt ja sellest loobutakse.

Lisateavet leiate päästikute jaotisest.

Päästikud

Vallandumise saab saavutada hoiatusedata nupul oleva atribuudiga, nagu on näidatud allpool.

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

või märguandest väljaspool asuval nupul , kasutades data-bs-targetallpool näidatud viisil:

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

Pange tähele, et hoiatuse sulgemine eemaldab selle DOM-ist.

meetodid

Saate luua hoiatuse eksemplari märguandekonstruktoriga, näiteks:

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

See paneb hoiatuse kuulama klõpsusündmusi data-bs-dismiss="alert"atribuuti omavatel järglastel elementidel. (Pole vajalik, kui kasutate data-api automaatset initsialiseerimist.)

meetod Kirjeldus
close Sulgeb hoiatuse, eemaldades selle DOM-ist. Kui elemendil on klassid .fadeja .show, kaob hoiatus enne selle eemaldamist.
dispose Hävitab elemendi hoiatuse. (Eemaldab DOM-elemendile salvestatud andmed)
getInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud hoiatuse eksemplari. Näiteks bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Staatiline meetod, mis tagastab DOM-i elemendiga seotud hoiatuse eksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt: bootstrap.Alert.getOrCreateInstance(element).

Põhikasutus:

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

Sündmused

Bootstrapi hoiatusplugin paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.

Sündmus Kirjeldus
close.bs.alert Käivitub kohe, kui closeeksemplari meetod kutsutakse.
closed.bs.alert Käivitatakse, kui hoiatus on suletud ja CSS-i üleminekud on lõppenud. 
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()
})