Source

Alɛrt dɛn

Gi kɔntɛkstual fidbak mɛsej fɔ tipik yuza akshɔn dɛn wit di anful alɛt mɛsej dɛn we de ɛn we kin chenj.

Ɛgzampul dɛn

Alɛt dɛn de fɔ ɛni lɔng tɛks, ɛn dɛn gɛt wan bɔtin fɔ dismis we yu kin pik. Fɔ mek yu stayl fayn, yuz wan pan di et kɔntɛkstual klas dɛn we yu nid.alert-success (ɛgz., ). Fɔ inlayn dismisal, yuz di alɛt dɛn jQuery plɔgin .

<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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .sr-onlyklas.

Yuz di .alert-linkyutiliti klas fɔ gi link dɛn we gɛt kɔlɔ we de mach kwik kwik wan insay ɛni alɛt.

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

Ɔda tin dɛn we de insay de

Alɛt dɛn kin gɛt ɔda HTML ɛlimɛnt dɛn bak lɛk ɛd, paregraf ɛn divayda dɛn.

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

Fɔ dismis

Yuz di alɛt JavaSkript plɔgin, i pɔsibul fɔ dismis ɛni alɛt inlayn. Na dis na aw fɔ du am:

  • Mek shɔ se yu dɔn lod di alɛt plɔgin, ɔ di Bootstrap JavaSkript we dɛn dɔn kɔmpilayt.
  • If yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js . Di wan we dɛn dɔn kɔmpilayt gɛt dis.
  • Ad wan dismis bɔtin ɛn di .alert-dismissibleklas, we de ad ɛkstra pad na di rayt say na di alɛt ɛn put di .closebɔtin.
  • Na di dismis bɔtin, ad di data-dismiss="alert"atribyut, we de mek di JavaSkript wok fayn. Mek shɔ se yu yuz di <button>ɛlimɛnt wit am fɔ biev fayn akɔdin to ɔl di divays dɛn.
  • Fɔ mek di alɛt dɛn gɛt layf we yu de dismis dɛn, mek shɔ se yu ad di .fadeɛn .showklas dɛn.

Yu kin si dis in akshɔn wit wan layv dɛmo:

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

JavaSkript bihayvya

Di tin dɛn we de mek pɔsin want fɔ du sɔntin

Ɛnable fɔ dismis wan alɛt bay JavaSkript:

$('.alert').alert()

Ɔ wit dataatribyut dɛn na wan bɔtin insay di alɛt , lɛk aw dɛn sho ɔp:

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

Notis se we yu lɔk wan alɛt, i go pul am na di DOM.

Di we aw dɛn de du am

We Tɔk bɔt
$().alert() Mek wan alɛt lisin fɔ klik ivin dɛn pan disɛndant ɛlimɛnt dɛn we gɛt di data-dismiss="alert"atribyut. (Nɔ nid we yu de yuz di data-api in ɔto-initializashɔn.)
$().alert('close') Klos wan alɛt bay we i pul am na di DOM. If di .fadeɛn .showklas dɛn de na di ɛlimɛnt, di alɛt go dɔn bifo dɛn pul am.
$().alert('dispose') Destroy wan element in alert. 
$('.alert').alert('close')

Di tin dɛn we kin apin

Bootstrap in alert plɔgin de ɛksplɔz sɔm ivin dɛn fɔ huk insay alert funkshɔnaliti.

Program Tɔk bɔt
close.bs.alert Dis ivent de faya wantɛm wantɛm we dɛn kɔl di closeinstans mɛtɔd.
closed.bs.alert Dis ivent de faya we di alɛt dɔn lɔk (go wet fɔ CSS transishɔn dɛn fɔ dɔn). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})