Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

Alerts

Biede kontekstuele feedbackberjochten foar typyske brûkersaksjes mei it hantsjefol beskikbere en fleksibele warskôgingsberjochten.

Op dizze side

Foarbylden

Alerts binne beskikber foar elke lingte fan tekst, lykas ek in opsjonele slute knop. Foar goede styling, brûk ien fan de acht fereaske kontekstuele klassen (bgl. .alert-success). Foar inline ûntslach, brûk de warskôgings JavaScript-plugin .

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>
Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.

Live foarbyld

Klikje op de knop hjirûnder om in warskôging sjen te litten (ferburgen mei ynline-stilen om te begjinnen), dan ôfwize (en ferneatigje) it mei de ynboude slute-knop.

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

Wy brûke de folgjende JavaSkript om ús live alert demo te triggerjen:

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

Brûk de .alert-linknutklasse om fluch oerienkommende kleurde keppelings te leverjen binnen elke warskôging.

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>

Oanfoljende ynhâld

Alerts kinne ek ekstra HTML-eleminten befetsje lykas kopteksten, paragrafen en dividers.

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>

Ikoanen

Op deselde manier kinne jo flexbox-hulpprogramma's en Bootstrap - ikoanen brûke om warskôgings te meitsjen mei ikoanen. Ofhinklik fan jo ikoanen en ynhâld, kinne jo mear nutsfoarsjenningen as oanpaste stilen tafoegje.

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>

Mear dan ien ikoan nedich foar jo warskôgings? Tink oan it brûken fan mear Bootstrap-ikoanen en it meitsjen fan in lokale SVG-sprite lykas sa om maklik meardere ikoanen te ferwizen.

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>

It ûntslaan

Mei it JavaScript-plugin foar warskôging is it mooglik om alle warskôgings ynline te ferwiderjen. Hjir is hoe:

  • Wês wis dat jo de warskôgingsplugin hawwe laden, of it kompilearre Bootstrap JavaScript.
  • Foegje in slute knop en de .alert-dismissibleklasse, dy't foeget ekstra padding oan de rjochterkant fan de warskôging en posysjes de slute knop.
  • Foegje op 'e slute knop it data-bs-dismiss="alert"attribút ta, dat de JavaScript-funksjonaliteit trigger. Wês wis dat jo it <button>elemint dermei brûke foar goed gedrach oer alle apparaten.
  • Om warskôgings te animearjen by it ôfwizen fan se, wês wis dat jo de .fadeen .showklassen tafoegje.

Jo kinne dit yn aksje sjen mei in live 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>
As in warskôging ôfwiisd wurdt, wurdt it elemint folslein út 'e sidestruktuer fuortsmiten. As in toetseboerdbrûker de warskôging ôfwiist mei de slute knop, sil har fokus ynienen ferlern gean en, ôfhinklik fan de browser, weromsette nei it begjin fan 'e side/dokumint. Om dizze reden riede wy oan om ekstra JavaSkript op te nimmen dy't nei it closed.bs.alertevenemint harket en programmatysk ynstelt focus()op de meast geskikte lokaasje op 'e side. As jo ​​fan plan binne om de fokus te ferpleatsen nei in net-ynteraktyf elemint dat normaal gjin fokus krijt, soargje derfoar dat tabindex="-1"jo it elemint tafoegje.

CSS

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke warskôgings no lokale CSS-fariabelen op .alertfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

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

$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

Brûkt yn kombinaasje mei $theme-colorsom kontekstuele modifikaasjeklassen te meitsjen foar ús warskôgings.

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

Loop dy't generearret de modifier klassen mei de 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 gedrach

Inisjalisearje

Inisjalisearje eleminten as warskôgings

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

Foar it ienige doel fan it ôfwizen fan in warskôging, is it net nedich om de komponint manuell te inisjalisearjen fia de JS API. Troch gebrûk te meitsjen fan data-bs-dismiss="alert"sil de komponint automatysk inisjalisearre wurde en goed ûntslein.

Sjoch de triggers seksje foar mear details.

Triggers

Untslach kin berikt wurde mei it dataattribút op in knop binnen de warskôging lykas hjirûnder oanjûn:

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

of op in knop bûten de warskôging mei de data-bs-targetlykas hjirûnder oanjûn:

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

Tink derom dat it sluten fan in warskôging it fan 'e DOM sil fuortsmite.

Metoaden

Jo kinne in warskôgingseksimplaar oanmeitsje mei de warskôgingskonstruktor, bygelyks:

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

Dit makket in warskôging harkje nei klik-eveneminten op ôfstammende eleminten dy't it data-bs-dismiss="alert"attribút hawwe. (Net nedich by it brûken fan de automatyske inisjalisaasje fan de data-api.)

Metoade Beskriuwing
close Slút in warskôging troch it te ferwiderjen fan 'e DOM. As de .fadeen .showklassen binne oanwêzich op it elemint, de warskôging sil fade út foardat it wurdt fuortsmiten.
dispose Ferneatiget de warskôging fan in elemint. (Ferwidert bewarre gegevens op it DOM-elemint)
getInstance Statyske metoade wêrmei jo de warskôgingseksimplaar kinne krije ferbûn oan in DOM-elemint. Bygelyks bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Statyske metoade dy't in warskôgingseksimplaar werombringt dy't ferbûn is mei in DOM-elemint of in nij oanmeitsje yn gefal it net inisjalisearre is. Jo kinne it sa brûke: bootstrap.Alert.getOrCreateInstance(element).

Basis gebrûk:

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

Eveneminten

De warskôgingsplugin fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.

Barren Beskriuwing
close.bs.alert Fires fuortendaliks as de closeeksimplaar metoade wurdt neamd.
closed.bs.alert Untslein as de warskôging is sluten en CSS-oergongen binne foltôge. 
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()
})