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

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

Ngokusebenzisa 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 i- <button>elementi nayo ngokuziphatha okufanele kuwo wonke amadivayisi.
  • Ukuze wenze izexwayiso zigqwayize uma uzichitha, 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 ukuthi izinguquko ze-CSS ziqedele). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})