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-only
nekilasi.
Umbala wesixhumanisi
Sebenzisa .alert-link
isigaba 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.
Wenze kahle!
Aww yeah, ufunde ngempumelelo lo mlayezo obalulekile wesexwayiso. Lo mbhalo oyisibonelo uzosebenza isikhathi eside ukuze ukwazi ukubona ukuthi isikhala phakathi kwesexwayiso sisebenza kanjani nalolu hlobo lokuqukethwe.
Noma nini lapho udinga, qiniseka ukuthi usebenzisa izinsiza ze-margin ukuze ugcine izinto zizinhle futhi zicocekile.
<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, idinga
util.js
. Inguqulo ehlanganisiwe ihlanganisa lokhu. - Engeza inkinobho yokucashisa kanye
.alert-dismissible
neklasi, okwengeza i-padding eyengeziwe kwesokudla sesexwayiso futhi imise.close
inkinobho. - 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
.fade
kanye.show
namakilasi.
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">×</span>
</button>
</div>
Ukuziphatha kweJavaScript
Izicupha
Nika amandla ukuchithwa kwesexwayiso nge-JavaScript:
$('.alert').alert()
Noma ngezibaluli data
enkinobheni engaphakathi kwesexwayiso , njengoba kubonisiwe ngenhla:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</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- .fade kanye .show namakilasi 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 close indlela 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...
})