Okulabula
Okuwa obubaka obukwata ku nsonga ku bikolwa eby’abakozesa ebya bulijjo n’obubaka obutonotono obuliwo era obukyukakyuka obw’okulabula.
Eby’okulabirako
Okulabula kuliwo ku buwanvu bwonna obw’ekiwandiiko, wamu ne bbaatuuni y’okugoba ey’okwesalirawo. Okusobola okukola sitayiro entuufu, kozesa emu ku kiraasi munaana ezeetaagisa.alert-success
ez’embeera (okugeza, ). Ku lw'okugobwa mu layini, kozesa alerts 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>
Okutuusa amakulu mu tekinologiya ayamba
Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-only
kiraasi.
Link langi
Kozesa ekibiina .alert-link
ky'omugaso okuwa amangu enkolagana za langi ezikwatagana munda mu kulabula kwonna.
<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>
Ebirimu ebirala
Okulabula era kuyinza okubaamu ebintu ebirala ebya HTML nga emitwe, obutundu n’ebigabanya.
Gyebaleko!
Aww yeah, osomye bulungi obubaka buno obukulu obw'okulabula. Ekiwandiiko kino eky’okulabirako kigenda kudduka katono osobole okulaba engeri ebanga munda mu kulabula gye likolamu n’ebirimu eby’ekika kino.
Buli lw’oba weetaaga, kakasa nti okozesa ebikozesebwa ku margin utilities okukuuma ebintu nga birungi era nga biyonjo.
<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>
Okugoba
Nga okozesa enkola ya JavaScript ey'okulabula, kisoboka okugoba okulabula kwonna mu layini. Laba engeri gye tulabamu:
- Kakasa nti otikkidde plugin y'okulabula, oba Bootstrap JavaScript ekung'aanyiziddwa.
- Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisa
util.js
. Enkyusa ekuŋŋaanyiziddwa erimu kino. - Okwongerako bbaatuuni y’okugoba ne
.alert-dismissible
kiraasi, ekyongerako padding ey’enjawulo ku ddyo w’okulabula n’okuteeka.close
bbaatuuni. - Ku bbaatuuni y'okugoba, yongera ku kintu
data-dismiss="alert"
, ekivaako enkola ya JavaScript. Kakasa nti okozesa<button>
elementi nayo okusobola okweyisa obulungi mu byuma byonna. - Okukola animmate alerts nga ozigoba, kakasa nti ogattako
.fade
ne.show
classes.
Kino osobola okukiraba mu bikolwa ng’okozesa live demo:
<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>
Enneeyisa ya JavaScript
Ebivaako amaanyi
Ssobozesa okugoba okulabula ng'oyita mu JavaScript:
$('.alert').alert()
Oba data
n'ebintu ku bbaatuuni munda mu kulabula , nga bwe kiragibwa waggulu:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Weetegereze nti okuggalawo okulabula kijja kukiggya mu DOM.
Enkola
Engeri | Okunnyonnyola |
---|---|
$().alert() |
Ekola okulabula okuwuliriza ebibaawo mu kunyiga ku elementi z’ezzadde ezirina data-dismiss="alert" attribute. (Tekyetaagisa nga okozesa data-api's auto-initialization.) |
$().alert('close') |
Eggalawo okulabula ng'akuggya mu DOM. Singa .fade ne .show classes zibeerawo ku elementi, okulabula kujja kuzikira nga tekunnaggyibwawo. |
$().alert('dispose') |
Esaanyaawo okulabula kwa elementi. |
$('.alert').alert('close')
Ebibaddewo
Bootstrap's alert plugin eraga ebitonotono ebibaawo olw'okuyunga mu nkola y'okulabula.
Omukolo | Okunnyonnyola |
---|---|
close.bs.alert |
Ekintu kino kikuba amangu ddala nga close enkola ya instance eyitiddwa. |
closed.bs.alert |
Ekintu kino kikubwa nga okulabula kuggaddwa (kijja kulinda enkyukakyuka za CSS okuggwa). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})