Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Alèt

Bay mesaj fidbak kontèks pou aksyon itilizatè tipik ak ti ponyen mesaj alèt ki disponib ak fleksib.

Nan paj sa a

Egzanp yo

Alèt yo disponib pou nenpòt ki longè tèks, osi byen ke yon bouton fèmen opsyonèl. Pou bon manier, sèvi ak youn nan uit klas kontèks obligatwa.alert-success yo (egzanp, ). Pou revokasyon an liy, itilize plugin JavaScript alerts .

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>
Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a ​​se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hiddenklas la.

Egzanp viv

Klike sou bouton ki anba a pou montre yon alèt (kache ak estil inline pou kòmanse), answit rejte (epi detwi) li ak bouton fèmen entegre.

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

Nou itilize JavaScript sa a pou deklanche Demo alèt nou an:

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

Sèvi ak .alert-linkklas sèvis piblik la byen vit bay lyen ki gen koulè ki matche nan nenpòt alèt.

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>

Kontni adisyonèl

Alèt yo kapab genyen tou eleman HTML adisyonèl tankou tit, paragraf ak divize.

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>

Ikon

Menm jan an tou, ou ka itilize sèvis piblik flexbox ak ikon Bootstrap pou kreye alèt ak ikon. Tou depan de ikon ou ak kontni, ou ka vle ajoute plis sèvis piblik oswa estil koutim.

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>

Bezwen plis pase yon icon pou alèt ou a? Konsidere itilize plis ikon Bootstrap epi fè yon sprite lokal SVG tankou sa a fasil referans ikon yo repete.

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>

Ranvwaye

Lè l sèvi avèk plugin JavaScript alèt la, li posib pou ranvwaye nenpòt alèt inline. Men ki jan:

  • Asire w ou te chaje plugin alèt la, oubyen konpile Bootstrap JavaScript.
  • Ajoute yon bouton fèmen ak .alert-dismissibleklas la, ki ajoute siplemantè padding sou bò dwat alèt la ak pozisyon bouton fèmen an.
  • Sou bouton an fèmen, ajoute data-bs-dismiss="alert"atribi a, ki deklanche fonksyonalite JavaScript. Asire ou ke ou sèvi ak <button>eleman nan ak li pou bon konpòtman atravè tout aparèy.
  • Pou anime alèt lè w ap ranvwaye yo, asire w ke ou ajoute .fadeak .showklas yo.

Ou ka wè sa a an aksyon ak yon Demo ap viv:

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>
Lè yon alèt ranvwaye, eleman an konplètman retire nan estrikti paj la. Si yon itilizatè klavye ranvwaye alèt la lè l sèvi avèk bouton fèmen, konsantre yo pral toudenkou pèdi epi, tou depann de navigatè a, retabli nan kòmansman an nan paj/dokiman an. Pou rezon sa a, nou rekòmande pou mete JavaScript adisyonèl ki koute closed.bs.alertevènman an epi pwogramasyon fikse focus()nan kote ki pi apwopriye nan paj la. Si w ap planifye pou deplase konsantre nan yon eleman ki pa entèaktif ki nòmalman pa resevwa konsantre, asire w ke ou ajoute tabindex="-1"nan eleman an.

CSS

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch varyab CSS en Bootstrap la, kounye a alèt yo itilize varyab CSS lokal yo .alertpou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

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

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

Itilize ansanm ak $theme-colorspou kreye klas modifye kontèks pou alèt nou yo.

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

Bouk ki jenere klas modifye yo ak alert-variant()mixin la.

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

Konpòtman JavaScript

Inisyalize

Inisyalize eleman kòm alèt

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

Pou sèl objektif pou ranvwaye yon alèt, li pa nesesè pou inisyalize eleman an manyèlman atravè API JS la. Lè w sèvi ak data-bs-dismiss="alert", eleman an pral inisyalize otomatikman epi byen ranvwaye.

Gade seksyon deklanche pou plis detay.

Deklanche

Yo ka reyalize ranvwa ak dataatribi ki sou yon bouton nan alèt la jan yo montre pi ba a:

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

oswa sou yon bouton deyò alèt la lè l sèvi avèk data-bs-targetjan yo montre anba a:

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

Remake byen ke fèmen yon alèt pral retire li nan DOM la.

Metòd

Ou ka kreye yon egzanp alèt ak konstrukteur alèt la, pou egzanp:

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

Sa fè yon alèt koute evènman klike sou eleman desandan ki gen data-bs-dismiss="alert"atribi a. (Pa nesesè lè w ap itilize oto-inisyalizasyon done-api a.)

Metòd Deskripsyon
close Fèmen yon alèt lè w retire li nan DOM la. Si klas yo .fadeak .showyo prezan sou eleman an, alèt la ap disparèt anvan li retire li.
dispose Detwi alèt yon eleman. (Retire done ki estoke sou eleman DOM)
getInstance Metòd estatik ki pèmèt ou jwenn egzanp alèt ki asosye ak yon eleman DOM. Pa egzanp: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Metòd estatik ki retounen yon egzanp alèt ki asosye ak yon eleman DOM oswa kreye yon nouvo nan ka li pa te inisyalize. Ou ka itilize li tankou sa a: bootstrap.Alert.getOrCreateInstance(element).

Itilizasyon debaz:

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

Evènman

Plugin alèt Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite alèt.

Evènman Deskripsyon
close.bs.alert Dife imedyatman lè yo closerele metòd egzanp lan.
closed.bs.alert Tire lè alèt la fèmen epi tranzisyon CSS yo fini. 
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()
})