Source

Digniin

Bixi fariimaha jawaab celinta macnaha guud ee ficilada isticmaale ee caadiga ah oo leh farriimaha digniinta ee la heli karo oo dabacsan.

Tusaalooyinka

Ogeysiisyada ayaa diyaar u ah dherer kasta oo qoraal ah, iyo sidoo kale badhanka cayrinta ikhtiyaarka ah. Si loo habeeyo habboon, isticmaal mid ka mid ah siddeedda fasal ee loo baahan yahay macnaha guud (tusaale, .alert-success). Ka saarida khadka tooska ah, isticmaal digniinaha jQuery plugin .

<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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .sr-onlyfasalka dhexdiisa ku qarsoon.

Isticmaal .alert-linkfasalka utility si aad si deg deg ah u bixiso iskuxiryada midabada leh ee digniin kasta.

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

Waxyaabo dheeraad ah

Ogeysiisyadu sidoo kale waxay ka koobnaan karaan walxo HTML dheeraad ah sida cinwaan, cutubyo iyo qaybiyayaal.

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

Xil ka qaadis

Adeegsiga digniinta JavaScript plugin, waxa suurtogal ah in meesha laga saaro digniin kasta oo khadka ah. Waa kan sida:

  • Hubi inaad ku shubtay furaha digniinta, ama Bootstrap JavaScript-ka la soo ururiyey.
  • Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js . Nooca la soo ururiyey waxaa ka mid ah.
  • Ku dar badhanka cayrinta iyo .alert-dismissiblefasalka, kaas oo ku dara suuf dheeraad ah dhinaca midigta ee digniinta oo dhig .closebadhanka.
  • Badhanka ceyrinta, ku dar data-dismiss="alert"sifada, taas oo kicinaysa shaqeynta JavaScript. U hubso inaad u isticmaasho <button>curiyaha leh hab-dhaqan habboon dhammaan qalabka.
  • Si aad u kiciso ogeysiisyada marka aad shaqada ka cayrinayso, hubi inaad ku darto .fadeiyo .showfasallada.

Waxaad tan ku arki kartaa iyadoo la adeegsanayo bandhig toos ah:

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

Dhaqanka JavaScript

Kiciyeyaasha

U oggolow cayrinta digniinta iyada oo loo marayo JavaScript:

$('.alert').alert()

Ama datasifooyin ku yaal badhanka digniinta ku jira , sida kor lagu muujiyey:

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

Ogsoonow in xidhitaanka digniinta ay ka saari doonto DOM.

Hababka

Habka Sharaxaada
$().alert() Wuxuu ka dhigaa digniin inuu dhegeysto dhacdooyinka gujinta ee walxaha faraca leh ee leh data-dismiss="alert"sifada. ( Looma baahna marka la isticmaalayo xogta-api si toos ah u bilaabay.)
$().alert('close') Xidhaa digniinta adoo ka saaraya DOM Haddii fasalada .fadeiyo .showfasaladu ay ku jiraan curiyaha, digniintu way libdhi doontaa ka hor intaan la saarin.
$().alert('dispose') Waxay baabi'isaa digniinta curiyaha. 
$('.alert').alert('close')

Dhacdooyinka

Bootstrap's alert plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta digniinta.

Dhacdo Sharaxaada
close.bs.alert Dhacdadani waxay isla markaaba gubataa marka closehabka tusaalaha la yiraahdo.
closed.bs.alert Dhacdadan waxa la eryaa marka digniinta la xidho (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})