Digniin
Bixi fariimaha jawaab celinta macnaha guud ee ficilada isticmaale ee caadiga ah oo leh farriimaha digniinta ee la heli karo oo dabacsan.
Tusaalooyinka
Ogeysiisyada ayaa diyaar u ah dherer kasta oo qoraal ah, iyo sidoo kale badhanka cayrinta ikhtiyaarka ah. Si loo habeeyo habboon, isticmaal mid ka mid ah siddeedda fasal ee loo baahan yahay macnaha guud (tusaale, .alert-success
). Ka saarida khadka tooska ah, isticmaal digniinaha 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>
U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .sr-only
fasalka dhexdiisa ku qarsoon.
Midabka isku xirka
Isticmaal .alert-link
fasalka utility si aad si deg deg ah u bixiso iskuxiryada midabada leh ee digniin kasta.
<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>
Waxyaabo dheeraad ah
Ogeysiisyadu sidoo kale waxay ka koobnaan karaan walxo HTML dheeraad ah sida cinwaan, cutubyo iyo qaybiyayaal.
Si fiican ayaa loo sameeyay!
Aww haa, si guul leh ayaad u akhriday fariintan digniinta ah ee muhiimka ah. Tusaalahan qoraalka ahi waxa uu socon doonaa xoogaa dheer si aad u aragto sida kala dheeraynta digniinta ay ula shaqeyso nuxurka noocaan ah.
Mar kasta oo aad u baahato, hubso inaad isticmaasho utility margin si aad u ilaaliso waxyaabaha wanaagsan oo nadiifsan.
<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>
Xil ka qaadis
Adeegsiga digniinta JavaScript plugin, waxa suurtogal ah in meesha laga saaro digniin kasta oo khadka ah. Waa kan sida:
- Hubi inaad ku shubtay furaha digniinta, ama Bootstrap JavaScript-ka la soo ururiyey.
- Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahay
util.js
. Nooca la soo ururiyey waxaa ka mid ah. - Ku dar badhanka cayrinta iyo
.alert-dismissible
fasalka, kaas oo ku dara suuf dheeraad ah dhanka midig ee digniinta oo dhigay.close
badhanka. - Badhanka ceyrinta, ku dar
data-dismiss="alert"
sifada, taasoo kiciya shaqeynta JavaScript. U hubso inaad u isticmaasho<button>
curiyaha leh habdhaqanka habboon ee dhammaan qalabka. - Si aad u kiciso digniinaha marka aad shaqada ka cayrinayso, hubi inaad ku darto fasalada
.fade
iyo.show
fasalada.
Waxaad tan ku arki kartaa iyadoo la adeegsanayo bandhig toos ah:
<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>
Dhaqanka JavaScript
Kiciyeyaasha
U oggolow cayrinta digniinta iyada oo loo marayo JavaScript:
$('.alert').alert()
Ama leh data
sifooyin ku yaal badhanka digniinta ku jira , sida kor lagu muujiyey:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Ogsoonow in xidhitaanka digniinta ay ka saari doonto DOM.
Hababka
Habka | Sharaxaada |
---|---|
$().alert() |
Wuxuu ka dhigaa digniin inuu dhegeysto dhacdooyinka gujinta ee walxaha faraca leh ee leh data-dismiss="alert" sifada. ( Looma baahna marka la isticmaalayo xogta-api si toos ah u bilaabay.) |
$().alert('close') |
Xidhaa digniinta adoo ka saaraya DOM Haddii fasalada .fade iyo .show fasaladu ay ku jiraan curiyaha, digniintu way libdhi doontaa ka hor intaan la saarin. |
$().alert('dispose') |
Waxay baabi'isaa digniinta curiyaha. |
$('.alert').alert('close')
Dhacdooyinka
Bootstrap's alert plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta digniinta.
Dhacdo | Sharaxaada |
---|---|
close.bs.alert |
Dhacdadani waxay isla markaaba gubataa marka close habka tusaalaha la yiraahdo. |
closed.bs.alert |
Dhacdadan waxa la eryaa marka digniinta la xidho (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})