Source

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.

Kpɔɖeŋuwo

Nuxlɔ̃amewo li na nuŋɔŋlɔ ƒe didime ɖesiaɖe, kpakple asiɖeɖe le eŋu ƒe dzesi si woate ŋu atia. Be nàwɔ 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 fli me ŋu la, zã nuxlɔ̃amewo jQuery plugin .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a 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 ɖe .sr-onlyklass la ŋu ene.

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

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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ã.

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

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.
  • Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js . Esia le gɔmeɖeɖe si woƒo ƒu la me.
  • Tsɔ asiɖeɖe le nu ŋu ƒe dzesi kple .alert-dismissibleklass la kpe ɖe eŋu, si naa nu bubu aɖe kpena ɖe nuxlɔ̃amea ƒe ɖusime eye wòɖoa .closeabɔta la ɖe teƒe.
  • Le dismiss ƒe dzesi dzi la, tsɔ data-dismiss="alert"attribute la 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:

<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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript ƒe nuwɔna

Nusiwo ʋãa ame

Na nuxlɔ̃ame aɖe ɖeɖeɖa to JavaScript dzi nawɔ dɔ:

$('.alert').alert()

Alo kple datanɔnɔmewo le abɔta aɖe dzi le nuxlɔ̃amea me , abe alesi woɖee fia le etame ene:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

Mɔnuwo

Nuwɔmɔnu Nuɖᴐɖᴐ
$().alert() Ewɔa nuxlɔ̃ame ɖoa to na ʋuʋu nudzɔdzɔwo le dzidzimeviwo ƒe akpa siwo si data-dismiss="alert"nɔnɔmea le. (Mehiã ne èle data-api ƒe auto-initialization zãm o.)
$().alert('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.
$().alert('dispose') Egblẽa nu le element aɖe ƒe ŋudzɔnɔnɔ ŋu. 
$(".alert").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 Nudzɔdzɔ sia doa dzo enumake ne woyɔ closekpɔɖeŋu mɔnu la.
closed.bs.alert Woɖea nudzɔdzɔ sia ne wotu nuxlɔ̃amea (alala be CSS ƒe tɔtrɔwo nawu enu). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})