SourceOkulabula
Okuwa obubaka obukwata ku nsonga ku bikolwa eby’abakozesa ebya bulijjo n’obubaka obutonotono obuliwo era obukyukakyuka obw’okulabula.
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 .
Okulabula okusookerwako okwangu —kukebere!
Okulabula okw’okubiri okwangu —kukebere!
Okulabula okwangu ku buwanguzi —kukebere!
Okulabula okwangu okw’akabi —kakebera!
Okulabula okwangu —kukebere!
A simple info alert —kikebera!
Okulabula okw’ekitangaala okwangu —kukebere!
Okulabula okwangu okw’ekizikiza —kukebere!
Koppa
<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.
Kozesa ekibiina .alert-link
ky'omugaso okuwa amangu enkolagana za langi ezikwatagana munda mu kulabula kwonna.
Koppa
<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>
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.
Koppa
<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>
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, kyetaagisautil.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:
Guacamole omutukuvu! Olina okukebera mu bimu ku bifo ebyo wansi.
×
Koppa
<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>
Ssobozesa okugoba okulabula ng'oyita mu JavaScript:
Koppa
$ ( '.alert' ). alert ()
Oba data
n'ebintu ku bbaatuuni munda mu kulabula , nga bwe kiragibwa waggulu:
Koppa
<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.
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.
Koppa
$ ( ".alert" ). alert ( 'close' )
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).
Koppa
$ ( '#myAlert' ). on ( 'closed.bs.alert' , function () {
// do something…
})