Source

Izexwayiso

Nikeza imilayezo yempendulo yomongo yezenzo zabasebenzisi ezijwayelekile ngedlanzana lemilayezo etholakalayo neguquguqukayo yesexwayiso.

Izibonelo

Izaziso ziyatholakala kunoma ibuphi ubude bombhalo, kanye nenkinobho yokuchitha ngokuzithandela. Ukuze wenze isitayela esifanele, sebenzisa izigaba eziyisishiyagalombili ezidingekayo zesimo (isb, .alert-success). Ngokukhipha okusemgqeni, sebenzisa i- plugin yezaziso ze-jQuery .

<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>
Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-onlynekilasi.

Sebenzisa .alert-linkisigaba sosizo ukuze unikeze ngokushesha izixhumanisi ezinemibala efanayo ngaphakathi kwanoma yisiphi isexwayiso.

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

Okuqukethwe okwengeziwe

Izaziso zingaqukatha izici ezengeziwe ze-HTML njengezihloko, izigaba kanye nabahlukanisi.

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

Iyacashisa

Usebenzisa i-plugin yesixwayiso se-JavaScript, kungenzeka ukucashisa noma yisiphi isexwayiso esisemgqeni. Nansi indlela:

  • Qiniseka ukuthi ulayishe i-plugin yesixwayiso, noma i-Bootstrap JavaScript ehlanganisiwe.
  • Uma wakha i-JavaScript yethu ngomthombo, idingautil.js . Inguqulo ehlanganisiwe ihlanganisa lokhu.
  • Engeza inkinobho yokucashisa kanye .alert-dismissibleneklasi, okwengeza i-padding eyengeziwe kwesokudla sesexwayiso futhi imise .closeinkinobho.
  • Enkinobho yokucashisa, engeza data-dismiss="alert"isibaluli, esicupha ukusebenza kwe-JavaScript. Qiniseka ukuthi usebenzisa <button>isici esinayo ngokuziphatha okufanele kuwo wonke amadivayisi.
  • Ukuze uphilise izexwayiso lapho uzikhipha, qiniseka ukuthi ungeza .fadekanye .shownamakilasi.

Lokhu ungakubona ngesenzo ngedemo ebukhoma:

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

Ukuziphatha kweJavaScript

Izicupha

Nika amandla ukuchithwa kwesexwayiso nge-JavaScript:

$('.alert').alert()

Noma ngezibaluli dataenkinobheni engaphakathi kwesexwayiso , njengoba kubonisiwe ngenhla:

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

Qaphela ukuthi ukuvala isexwayiso kuzosisusa ku-DOM.

Izindlela

Indlela Incazelo
$().alert() Yenza isixwayiso silalele imicimbi yokuchofoza ezintweni eziphumayo data-dismiss="alert"ezinesibaluli. (Akudingekile uma usebenzisa i-auto-initialization ye-data-api.)
$().alert('close') Ivala isexwayiso ngokusisusa ku-DOM. Uma i- .fadekanye .shownamakilasi ekhona engxenyeni, isexwayiso sizofiphala ngaphambi kokuthi sisuswe.
$().alert('dispose') Icekela phansi isixwayiso se-elementi. 
$(".alert").alert('close')

Imicimbi

I-plugin yesixwayiso ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

Umcimbi Incazelo
close.bs.alert Lo mcimbi uvutha ngokushesha lapho closeindlela yesibonelo ibizwa.
closed.bs.alert Lo mcimbi uyaxoshwa uma isaziso sivaliwe (sizolinda ukuguqulwa kwe-CSS ukuthi kuqedwe). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})