Source

Fadakarwa

Bayar da saƙon martani na mahallin don ayyukan mai amfani na yau da kullun tare da ɗimbin saƙon faɗakarwa da ke akwai da sassauƙa.

Misalai

Ana samun faɗakarwa don kowane tsayin rubutu, da maɓallin korar zaɓi na zaɓi. Don salo mai kyau, yi amfani da ɗaya daga cikin azuzuwan mahallin takwas da ake buƙata (misali, .alert-success). Don korar layi, yi amfani da faɗakarwar 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>
Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-onlyajin.

Yi .alert-linkamfani da ajin mai amfani don samar da hanyoyin haɗin kai masu dacewa da sauri cikin kowane faɗakarwa.

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

Ƙarin abun ciki

Fadakarwa kuma na iya ƙunsar ƙarin abubuwan HTML kamar kanun labarai, sakin layi da masu rarrabawa.

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

Korar

Yin amfani da plugin ɗin JavaScript na faɗakarwa, yana yiwuwa a watsar da duk wani layin faɗakarwa. Ga yadda:

  • Tabbatar cewa kun loda plugin ɗin faɗakarwa, ko haɗar Bootstrap JavaScript.
  • Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js . Sigar da aka haɗa ta haɗa da wannan.
  • Ƙara maɓallin sallama da .alert-dismissibleajin, wanda ke ƙara ƙarin fakiti zuwa dama na faɗakarwa kuma ya sanya .closemaɓallin.
  • A kan maɓallin korar, ƙara data-dismiss="alert"sifa, wanda ke haifar da aikin JavaScript. Tabbatar amfani da <button>kashi tare da shi don halayen da suka dace a duk na'urori.
  • Don kunna faɗakarwa lokacin korar su, tabbatar da ƙara .fadeda .showazuzuwan.

Kuna iya ganin wannan a aikace tare da demo live:

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

Halin JavaScript

Masu tayar da hankali

Kunna korar faɗakarwa ta hanyar JavaScript:

$('.alert').alert()

Ko tare da datahalaye akan maɓalli a cikin faɗakarwa , kamar yadda aka nuna a sama:

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

Lura cewa rufe faɗakarwa zai cire shi daga DOM.

Hanyoyin

Hanya Bayani
$().alert() Yana sa faɗakarwa yana saurare don danna abubuwan da suka faru a kan abubuwan da suka fito waɗanda ke da data-dismiss="alert"sifa. (Ba lallai ba ne lokacin amfani da bayanan-api ta atomatik-farawa.)
$().alert('close') Yana rufe faɗakarwa ta cire shi daga DOM. Idan azuzuwan .fadesuna .shownan akan kashi, faɗakarwar zata shuɗe kafin a cire ta.
$().alert('dispose') Yana lalata faɗakarwar wani abu. 
$(".alert").alert('close')

Abubuwan da suka faru

Flugin faɗakarwar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan faɗakarwa.

Lamarin Bayani
close.bs.alert Wannan taron yana gobara nan da nan lokacin da closeaka kira hanyar misali.
closed.bs.alert Ana kora wannan taron lokacin da aka rufe faɗakarwa (zai jira canjin CSS don kammala). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})