Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Nuxlɔ̃amewo

Na nyaŋuɖoɖo ƒe gbedasi siwo ku ɖe nya siwo ƒo xlãe ŋu na zãla ƒe nuwɔna siwo bɔ kple nuxlɔ̃ame gbedasi ʋɛ siwo li eye woate ŋu atrɔ asi le wo ŋu.

Le axa sia dzi

Kpɔɖeŋuwo

Nuxlɔ̃amewo li na nuŋɔŋlɔ ƒe didime ɖesiaɖe, eye woate ŋu axe mɔ ɖe enu hã. Ne èdi be yeawɔ atsyã nyuie la, zã nya siwo ƒo xlãe ƒe klass enyi siwo hiã.alert-success la dometɔ ɖeka (le kpɔɖeŋu me, ). Ne èdi be yeaɖe asi le eŋu le fli me la, zã nuxlɔ̃amewo ƒe JavaScript ƒe kpeɖeŋutɔ .

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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hiddenklass la ene.

Kpɔɖeŋu si le agbe

Zi dzesi si le ete dzi be nàɖe nuxlɔ̃ame aɖe afia (woɣlae kple atsyã siwo le fli me be nàdze egɔme), emegbe nàɖe asi le eŋu (eye nàtsrɔ̃e) kple nutrenu si wotu ɖe eme la.

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

Míezãa JavaScript si gbɔna tsɔ dzea míaƒe nuxlɔ̃ame ƒe wɔwɔfia si le agbe la gɔme:

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

Zã .alert-linkutility class la nàtsɔ ana kadodo siwo ƒe amadede sɔ kple wo nɔewo kaba le nuxlɔ̃ame ɖesiaɖe me.

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>

Nya bubuwo kpee

Nuxlɔ̃amewo ateŋu anye HTML ƒe akpa bubuwo abe tanyawo, memamawo kple mamawo hã.

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>

Nɔnɔmetatawo

Nenema ke àte ŋu azã flexbox dɔwɔnuwo kple Bootstrap Icons atsɔ awɔ nuxlɔ̃amewo kple dzesiwo. Le wò nɔnɔmetatawo kple emenyawo nu la, àdi be yeatsɔ dɔwɔnu bubuwo alo atsyã siwo nèwɔ ɖe ɖoɖo nu akpe ɖe eŋu.

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>

Èhiã dzesi siwo wu ɖeka na wò nuxlɔ̃amewoa? Bu Bootstrap Icons geɖe zazã ŋu eye nàwɔ local SVG sprite abe ale ene be nàyɔ dzesi mawo ke bɔbɔe enuenu.

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>

Nyaɖeɖe le dɔ me

Ne èzã nuxlɔ̃ame JavaScript ƒe kpeɖeŋutɔ la, àte ŋu agbe nuxlɔ̃ame ɖesiaɖe le fli me. Ale si nàwɔe nye esi:

  • Kpɔ egbɔ be yetsɔ nuxlɔ̃ame ƒe kpeɖeŋutɔa, alo Bootstrap JavaScript si woƒo ƒu la de eme.
  • Tsɔ nutrenu ƒe abɔta kple .alert-dismissibleklass la kpe ɖe eŋu, si tsɔa nu bubu kpena ɖe nuxlɔ̃amea ƒe ɖusime eye wòɖoa nutrenu ƒe dzesi ɖe teƒe.
  • Le nutrenu ƒe dzesi dzi la, tsɔ data-bs-dismiss="alert"nɔnɔmea kpee, si aʋã JavaScript ƒe dɔwɔwɔ. Kpɔ egbɔ be yezã <button>element la kplii hena nuwɔna nyuitɔ le mɔ̃wo katã dzi.
  • Be nàna nuxlɔ̃amewo nawɔ dɔ ne èle wo ɖem ɖa la, kpɔ egbɔ be yetsɔ .fadekple .showklassawo kpee.

Àte ŋu akpɔ esia le dɔwɔwɔ me kple 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>
Ne wogbe nuxlɔ̃ame aɖe la, woɖea element la ɖa keŋkeŋ le axaa ƒe ɖoɖoa me. Ne keyboard zãla aɖe gbe nuxlɔ̃amea to nutrenu ƒe dzesi dzi la, woƒe susu abu zi ɖeka eye le web-browser la nu la, woagbugbɔ aɖo axaa/nuŋlɔɖia ƒe gɔmedzedze. Le susu sia ta la, míele aɖaŋu ɖom be nàde JavaScript bubu siwo ɖoa to closed.bs.alertnudzɔdzɔa eye wòɖoa ɖoɖowɔwɔ focus()ɖe teƒe si sɔ wu le axaa dzi la ɖe eme. Ne èle ɖoɖo wɔm be yeatsɔ susu ayi nusi mewɔa dɔ kplii o si le dzɔdzɔme nu la, mexɔa susu o la, kpɔ egbɔ be yetsɔe kpe tabindex="-1"ɖe nusi me wowɔa dɔ le ŋu.

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, nuxlɔ̃amewo zãa teƒea ƒe CSS tɔtrɔwo le fifia .alerthena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si nyo wu. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$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 ƒe tɔtrɔwo

$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 ƒe mixin

Wozãnɛ ɖekae kple $theme-colorstsɔ wɔa nya siwo ƒo xlãe ƒe tɔtrɔ ƒe hatsotsowo na míaƒe nuxlɔ̃amewo.

@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 ƒe ʋuƒo

Loop si wɔa modifier classes kple 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 ƒe nuwɔna

Dze egɔme

Dze elementwo gɔme abe nuxlɔ̃amewo ene

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

Le taɖodzinu ɖeka kolia si nye be woaɖe asi le nuxlɔ̃ame aɖe ŋu ta la, mehiã be nàdze akpaa gɔme kple asi to JS API dzi o. To , zazã me la data-bs-dismiss="alert", woadze akpaa gɔme le eɖokui si eye woaɖe asi le eŋu nyuie.

Kpɔ akpa si nye nusiwo ʋãa ame hena numeɖeɖe bubuwo.

Nusiwo ʋãa ame

Woateŋu awɔ dɔmeɖeɖe kple datanɔnɔme si le abɔta aɖe dzi le nuxlɔ̃amea me abe alesi woɖee fia le ete ene:

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

alo le abɔta aɖe si le nuxlɔ̃amea godo dzi to data-bs-targetalesi woɖee fia le ete la zazã me:

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

De dzesii be ne ètu nuxlɔ̃ame aɖe la, aɖee ɖa le DOM la me.

Mɔnuwo

Àteŋu awɔ nuxlɔ̃ame ƒe kpɔɖeŋu kple nuxlɔ̃ame xɔtula, le kpɔɖeŋu me:

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

Esia naa nuxlɔ̃ame ɖoa to ʋuʋu nudzɔdzɔwo le dzidzimevi ƒe akpa siwo si data-bs-dismiss="alert"nɔnɔmea le la dzi. (Mehiã ne èle data-api ƒe auto-initialization zãm o.)

Nuwɔmɔnu Nuɖᴐɖᴐ
close Etua nuxlɔ̃ame aɖe to eɖeɖe le DOM la me. Ne .fadekple .showklasswo le element la dzi la, nuxlɔ̃amea nu ayi hafi woaɖee ɖa.
dispose Egblẽa nu le element aɖe ƒe ŋudzɔnɔnɔ ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)
getInstance Static mɔnu si ɖea mɔ na wò be nàxɔ nuxlɔ̃ame ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe. Le kpɔɖeŋu me: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Static mɔnu si trɔa nuxlɔ̃ame ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale: bootstrap.Alert.getOrCreateInstance(element).

Zãzã veviwo:

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

Nudzɔdzɔwo

Bootstrap ƒe nuxlɔ̃ame plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame dɔwɔwɔ me.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
close.bs.alert Dzoa enumake ne woyɔ closeinstance mɔnu la.
closed.bs.alert Woɖea dzo ne wotu nuxlɔ̃amea eye CSS ƒe tɔtrɔwo wu enu. 
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()
})