Source

Nti mkpu

Nye ozi nzaghachi gburugburu maka omume onye ọrụ na-ahụkarị site na iji obere ozi njikere dị ma na-agbanwe agbanwe.

Ihe atụ

Ọkwa dị maka ogologo ederede ọ bụla, yana bọtịnụ ịchụpụ nhọrọ. Maka ịke nke ọma, jiri otu n'ime klaasị asatọ achọrọ.alert-success (dịka ọmụmaatụ ). Maka nchụpụ n'ịntanetị, jiri jQuery ngwa mgbakwunye .

<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-onlyklaasị.

Jiri .alert-linkklaasị ịba uru nye ngwa ngwa njikọ agba dabara n'ime njikere ọ bụla.

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

Ọdịnaya agbakwunyere

Mkpu nwekwara ike ịnwe ihe HTML ndị ọzọ dị ka isiokwu, paragraf na nkesa.

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

Na-achụpụ

N'iji ngwa mgbakwunye Javascript nke njikere, ọ ga-ekwe omume ịwepu inline njikere ọ bụla. Nke a bụ ka:

  • Jide n'aka na ị kwajuru ngwa mgbakwunye njikere, ma ọ bụ Bootstrap Javascript achịkọtara.
  • Ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js . Ụdị achịkọtara gụnyere nke a.
  • Tinye bọtịnụ nchụpụ na .alert-dismissibleklaasị, nke na-agbakwunye padding ọzọ n'aka nri nke njikere wee debe .closebọtịnụ ahụ.
  • Na bọtịnụ ịchụpụ, gbakwunye data-dismiss="alert"àgwà, nke na-ebute ọrụ Javascript. Jide n'aka na ị ga-eji <button>mmewere ya na omume kwesịrị ekwesị n'ofe ngwaọrụ niile.
  • Iji mee ka ngosi mara mgbe ị na-achụpụ ha, jide n'aka na ịtinye .fadena .showklaasị.

Ị nwere ike ịhụ nke a ka ọ na-eme site na iji ngosi dị ndụ:

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

Omume Javascript

Na-akpalite

Kwado ịchụpụ ọkwa site na Javascript:

$('.alert').alert()

Ma ọ bụ jiri njiri mara datana bọtịnụ dị na njikere , dị ka egosiri n'elu:

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

Mara na imechi mkpu ga-ewepụ ya na DOM.

Ụzọ

Usoro Nkọwa
$().alert() Na-eme ka anya na-ege ntị maka ihe omume pịa na ihe ndị sitere na nke nwere data-dismiss="alert"njirimara. (Ọ dịghị mkpa mgbe ị na-eji data-api's auto-mmalite.)
$().alert('close') Na-emechi mkpu site na iwepu ya na DOM. Ọ bụrụ .fadena .showklaasị dị na mmewere, njikere ga-apụ apụ tupu ewepụ ya.
$().alert('dispose') Na-emebi mmachi mmewere. 
$('.alert').alert('close')

Ihe omume

Ngwa mgbakwunye njikere Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ njikere.

Ihe omume Nkọwa
close.bs.alert Ihe omume a na-agba ọkụ ozugbo closea na-akpọ usoro ihe atụ.
closed.bs.alert A na-achụpụ ihe omume a mgbe emechiela njikere (ga-echere mgbanwe CSS ka ọ mechaa). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})