Akeekkachiisa
Ergaawwan yaada yaada haalaa gochoota fayyadamaa idileedhaaf ergaawwan akeekkachiisaa harka muraasa jiran fi jijjiiramaa ta'an waliin kenni.
Fakkeenyaaf
Akeekkachiisni dheerina barruu kamiifuu ni argama, akkasumas qaree filannoo kuffisuu. Akkaataa sirrii ta'eef, gita haalata saddeet barbaachisan keessaa tokko fayyadami (fkn, .alert-success
). Sarara keessaa hojii irraa ari'uuf, akeekkachiisa jQuery plugin fayyadami .
<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>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu
Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-only
gita waliin dhokatee.
Halluu walitti hidhu
.alert-link
Akeekkachiisa kamiyyuu keessaa walitti hidhamiinsa halluu walsimsiisu saffisaan kennuudhaaf gita faayidaa fayyadami .
<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>
Qabiyyee dabalataa
Akeekkachiisni qaamolee HTML dabalataa kan akka mataduree, keewwataa fi qoqqoodduus qabaachuu danda'a.
Gaarii goote!
Aww yeah, ergaa akeekkachiisaa barbaachisaa kana milkaa'inaan dubbisteetta. Barruun fakkeenyaa kun xiqqoo dheeraa hojjechuuf deema, akka ati akkamitti addaan fageenyi akeekkachiisa keessaa qabiyyee gosa kanaa wajjin hojjetu ilaaluu dandeessa.
Yeroo barbaadde hundatti, wantoota gaarii fi sirrii ta’an akka qabaataniif faayidaa margin utilities fayyadamuu kee mirkaneessi.
<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>
Hojii irraa ari'uu
Ijaarsa JaavaScript akeekkachiisaa fayyadamuun, akeekkachiisa kamiyyuu sarara keessaa kuffisuun ni danda'ama. Akkamitti akka ta'e kunooti:
- Ijaarsa akeekkachiisaa, ykn JaavaScript Bootstrap qindaa'e fe'uu kee mirkaneessi.
- Yoo JavaScript
util.js
keenya madda irraa ijaaraa jirta ta'e, . Version qindaa'e kana of keessaa qaba. - Qabduu hojii irraa ari'uu fi
.alert-dismissible
gita dabali, kunis padding dabalataa gara mirga akeekkachiisaatti dabalee.close
qaree iddoo kaa'a. - Qabduu ari'uu irratti,
data-dismiss="alert"
amalli itti dabali, kunis dalagaa JaavaScript kakaasa.<button>
Meeshaalee hunda irratti amala sirrii ta'eef elementii isa waliin fayyadamuu kee mirkaneessi . - Yeroo isaan kuffiftu akeekkachiisa sochoosuuf, gitaalee
.fade
fi dabaluu kee mirkaneessi..show
Kana hojiidhaan demoo kallattiin arguu dandeessu:
<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>
Amala JaavaScript
Kaka’umsa
Karaa JaavaScript akeekkachiisa kuffisuu dandeessisi:
$('.alert').alert()
Yookiin data
amaloota qaree irratti akeekkachiisa keessa jiran waliin , akkuma armaan olitti agarsiifame:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Hubadhu, akeekkachiisa cufuun DOM irraa akka haqamu.
Malawwan
Mala | Ibsa |
---|---|
$().alert() |
Akeekkachiisa taateewwan cuqaasuu qaamolee sanyii kanneen data-dismiss="alert" amaloota qaban irratti dhaggeeffatu taasisa. (Yeroo ofumaan jalqabuu data-api fayyadamtu barbaachisaa miti.) |
$().alert('close') |
Akeekkachiisa DOM irraa haquudhaan cufa. Yoo gitaaleen .fade fi .show elementii irratti argaman, akeekkachiisni osoo hin haqamin dura ni bada. |
$().alert('dispose') |
Akeekkachiisa elementii tokkoo ni balleessa. |
$('.alert').alert('close')
Taateewwan
Bootstrap's alert plugin taateewwan muraasa gara dalagaa akeekkachiisaatti hooking gochuuf saaxila.
Taatee | Ibsa |
---|---|
close.bs.alert |
Taatee kun yeroo close mala fakkeenyaa waamamu battalumatti dhukaasa. |
closed.bs.alert |
Taatee kun yeroo akeekkachiisni cufame ni dhukaafama (ce'umsa CSS xumuruuf ni eega). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})