Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Waarskuwings

Verskaf kontekstuele terugvoerboodskappe vir tipiese gebruikeraksies met die handvol beskikbare en buigsame waarskuwingsboodskappe.

Op hierdie bladsy

Voorbeelde

Waarskuwings is beskikbaar vir enige lengte van teks, sowel as 'n opsionele toemaakknoppie. Vir behoorlike stilering, gebruik een van die agt vereiste kontekstuele klasse (bv. .alert-success). Vir inlyn ontslag, gebruik die waarskuwings JavaScript-inprop .

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>
Betekenis oordra aan ondersteunende tegnologieë

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Lewende voorbeeld

Klik die knoppie hieronder om 'n waarskuwing te wys (versteek met inlynstyle om te begin), maak dit dan af (en vernietig) dit met die ingeboude toemaakknoppie.

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

Ons gebruik die volgende JavaScript om ons regstreekse waarskuwingsdemo te aktiveer:

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

Gebruik die .alert-linknutsklas om vinnig bypassende gekleurde skakels binne enige waarskuwing te verskaf.

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>

Bykomende inhoud

Waarskuwings kan ook bykomende HTML-elemente soos opskrifte, paragrawe en verdelers bevat.

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

Net so kan jy flexbox-nutsprogramme en Bootstrap-ikone gebruik om waarskuwings met ikone te skep. Afhangende van jou ikone en inhoud, wil jy dalk meer nutsprogramme of pasgemaakte style byvoeg.

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>

Benodig jy meer as een ikoon vir jou waarskuwings? Oorweeg dit om meer Bootstrap-ikone te gebruik en 'n plaaslike SVG-sprite soos so te maak om maklik herhaaldelik na dieselfde ikone te verwys.

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>

Ontslaan

Deur die waarskuwing-JavaScript-inprop te gebruik, is dit moontlik om enige waarskuwing inlyn af te wys. Hier is hoe:

  • Maak seker dat jy die waarskuwing-inprop, of die saamgestelde Bootstrap JavaScript, gelaai het.
  • Voeg 'n toemaakknoppie en die .alert-dismissibleklas by, wat ekstra vulling aan die regterkant van die waarskuwing byvoeg en die toemaakknoppie plaas.
  • Voeg die data-bs-dismiss="alert"kenmerk by op die toemaakknoppie, wat die JavaScript-funksionaliteit aktiveer. Maak seker dat jy die <button>element daarmee gebruik vir behoorlike gedrag op alle toestelle.
  • .fadeMaak seker dat jy die en .showklasse byvoeg om waarskuwings te animeer wanneer jy dit afwys .

Jy kan dit in aksie sien met 'n lewendige demo:

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>
Wanneer 'n waarskuwing verwerp word, word die element heeltemal van die bladsystruktuur verwyder. As 'n sleutelbordgebruiker die waarskuwing van die hand wys met die toemaakknoppie, sal hul fokus skielik verloor word en, afhangend van die blaaier, na die begin van die bladsy/dokument teruggestel word. Om hierdie rede beveel ons aan om bykomende JavaScript in te sluit wat vir die closed.bs.alertgeleentheid luister en programmaties focus()op die mees geskikte plek op die bladsy stel. As jy van plan is om fokus te skuif na 'n nie-interaktiewe element wat normaalweg nie fokus ontvang nie, maak seker dat jy tabindex="-1"by die element voeg.

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik waarskuwings nou plaaslike CSS-veranderlikes aan .alertvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

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

$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 meng

Gebruik in kombinasie met $theme-colorsom kontekstuele wysigerklasse vir ons waarskuwings te skep.

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

Lus wat die wysigerklasse genereer met die alert-variant()mixin.

// 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 gedrag

Inisialiseer

Inisialiseer elemente as waarskuwings

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

Vir die uitsluitlike doel om 'n waarskuwing af te wys, is dit nie nodig om die komponent handmatig via die JS API te inisialiseer nie. Deur gebruik te maak van data-bs-dismiss="alert", sal die komponent outomaties geïnisialiseer word en behoorlik afgemaak word.

Sien die snellers- afdeling vir meer besonderhede.

Snellers

Ontslag kan bereik word met die datakenmerk op 'n knoppie binne die waarskuwing soos hieronder gedemonstreer:

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

of op 'n knoppie buite die waarskuwing deur gebruik te maak van die data-bs-targetsoos hieronder gedemonstreer:

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

Let daarop dat die sluiting van 'n waarskuwing dit van die DOM sal verwyder.

Metodes

Jy kan 'n waarskuwingsinstansie met die waarskuwingskonstruktor skep, byvoorbeeld:

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

Dit laat 'n waarskuwing luister vir klikgebeurtenisse op afstammelinge elemente wat die data-bs-dismiss="alert"kenmerk het. (Nie nodig wanneer die data-api se outo-initialisasie gebruik word nie.)

Metode Beskrywing
close Maak 'n waarskuwing toe deur dit uit die DOM te verwyder. As die .fadeen .showklasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word.
dispose Vernietig 'n element se waarskuwing. (Verwyder gestoorde data op die DOM-element)
getInstance Statiese metode waarmee u die waarskuwingsinstansie kan kry wat met 'n DOM-element geassosieer word. Byvoorbeeld bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Statiese metode wat 'n waarskuwingsgeval terugstuur wat aan 'n DOM-element geassosieer word of 'n nuwe een skep ingeval dit nie geïnisialiseer is nie. Jy kan dit so gebruik: bootstrap.Alert.getOrCreateInstance(element).

Basiese gebruik:

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

Gebeurtenisse

Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.

Gebeurtenis Beskrywing
close.bs.alert Vuur onmiddellik wanneer die closeinstansiemetode geroep word.
closed.bs.alert Word afgevuur wanneer die waarskuwing gesluit is en CSS-oorgange voltooi is. 
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()
})