fanairana
Manomeza hafatra tamberin'andraikitra amin'ny teny manodidina ho an'ny hetsika mahazatra ataon'ny mpampiasa miaraka amin'ireo hafatra fanairana azo ampiasaina sy mora azo.
OHATRA
Ny fanairana dia misy amin'ny halavan'ny lahatsoratra rehetra, ary koa ny bokotra fandroahana tsy voatery. Mba hanaovana endrika araka ny tokony ho izy dia ampiasao ny iray amin'ireo kilasy valo ilaina.alert-success
amin'ny teny manodidina (oh, ). Ho an'ny fandroahana an-tserasera, ampiasao ny plugin jQuery fampandrenesana .
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-only
kilasy.
Loko rohy
Ampiasao ny .alert-link
kilasin'ny utility mba hanomezana rohy miloko mifanandrify haingana ao anatin'ny fanairana rehetra.
<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>
Votoaty fanampiny
Ny fampandrenesana dia mety ahitana singa HTML fanampiny toy ny lohateny, fehintsoratra ary fizarana.
Vita tsara!
Eny, namaky soa aman-tsara ity hafatra fanairana manan-danja ity ianao. Ity lahatsoratra ohatra ity dia handeha lavitra kely mba hahitanao ny fomba fiasan'ny elanelana ao anatin'ny fanairana amin'ity karazana atiny ity.
Isaky ny mila izany ianao dia tandremo tsara ny mampiasa fitaovana margin mba hitazonana zavatra tsara sy milamina.
<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>
nandefa
Amin'ny alàlan'ny plugin JavaScript alert, azo atao ny manilika ny fampandrenesana rehetra. Toy izao ny fomba:
- Ataovy azo antoka fa nampiditra ny plugin fanairana ianao, na ny JavaScript Bootstrap natambatra.
- Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitaky
util.js
. Ny dikan-teny natambatra dia ahitana izany. - Manampia bokotra fandroahana sy ny
.alert-dismissible
kilasy, izay manampy padding fanampiny eo ankavanan'ny fanairana ary mametraka ny.close
bokotra. - Ao amin'ny bokotra dismiss, ampio ny
data-dismiss="alert"
toetra, izay miteraka ny fampiasa JavaScript. Ataovy azo antoka ny fampiasana ilay<button>
singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra. - Mba hanamafisana ny fanairana rehefa manilika azy ireo, ataovy azo antoka fa ampio ny
.fade
sy.show
kilasy.
Azonao atao ny mahita an'ity hetsika ity miaraka amin'ny demo mivantana:
<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>
Fihetsika JavaScript
Niteraka
Alefaso ny fandroahana fanairana amin'ny alàlan'ny JavaScript:
$('.alert').alert()
Na miaraka amin'ny data
toetra eo amin'ny bokotra iray ao anatin'ny fanairana , araka ny aseho etsy ambony:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Mariho fa ny fanakatonana fanairana dia hanala azy amin'ny DOM.
fomba
FOMBA | Description |
---|---|
$().alert() |
Manao fanairana amin'ny fihainoana hetsika kitiho amin'ny singa taranaka manana ny data-dismiss="alert" toetra. (Tsy ilaina amin'ny fampiasana ny fanombohana mandeha ho azy ny data-api.) |
$().alert('close') |
Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha misy ny .fade and .show classes ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy. |
$().alert('dispose') |
Manimba ny fanairana singa iray. |
$('.alert').alert('close')
zava-mitranga
Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.
Event | Description |
---|---|
close.bs.alert |
Mirehitra avy hatrany ity hetsika ity rehefa close antsoina ny fomba fiasa. |
closed.bs.alert |
Tafavoaka ity hetsika ity rehefa nakatona ny fanairana (hiandry ny fahavitan'ny fifindrana CSS). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})