Alertakuna
Quy contextual retroalimentación willakuykunata típico ruwaq ruwaykunapaq makilla kaqniyuq chaymanta flexible willay willakuykunawan.
Ejemplos
Alertakuna ima largo qillqapaqpas kan, chaymanta huk akllana qarquy botón. Allin estilo ruwanapaq, pusaq munasqa clasekuna contextualmanta hukninta llamk'achiy (kayhina, .alert-success
). Chiru ukhupi qarqunapaq, willaykunata jQuery plugin llamk'achiy .
<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>
Yanapakuq tecnologiakunaman significadota apachiy
Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .sr-only
clasewan pakasqa.
Enlace color
Yanapakuy .alert-link
claseta llamk'achiy usqhaylla tupaq llimp'i t'inkikuna mayqin willay ukhupi qunapaq.
<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>
Contenido adicional
Alertakuna HTML elementokuna yapasqapas kanman umalliqkuna, parrafokuna chaymanta rakiqkuna hina.
Allinmi!
Aww arí, allinta ñawinchanki kay importante alerta willakuyta. Kay ejemplo qillqa aswan unayta purinqa chaymanta imayna huk willay ukhupi espaciamiento kay laya contenidowan llamk'an chayta qhawayta atikunki.
Maypachachus necesitanki chayqa, ama hina kaspa margen utilidadkunata utilizay imakunatapas sumaq allichasqa kananpaq.
<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>
Despedir
JavaScript plugin willayta llamk'achispa, mayqin willayta chiru ukhupi qarquyta atikun. Kaypi imayna:
- Aswan allin kay willay plugin kaqmanta kargasqaykita, utaq huñusqa Bootstrap JavaScript kaqmanta.
- Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munan
util.js
. Huñusqa layapiqa kaytam churan. - Yanapakuy huk botón de despido chaymanta
.alert-dismissible
clase, chaymanta yapan extra acolchado paña alerta kaqpi chaymanta.close
botón kaqpi churan. - Dismiss ñit'inapi,
data-dismiss="alert"
atributota yapay, chaymanta JavaScript ruwayta qallarichin. Aswan allinta chaywan<button>
elementota llamk'achiy allin ruwanapaq llapa dispositivokunapurapi. - Alertakunata qarquspa kawsachinaykipaq, ama hina kaspa
.fade
chaymanta.show
clasekunata yapay.
Kayta ruwaypi kawsaq demowan qhawayta atinki:
<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>
JavaScript nisqap ruwaynin
Gatillos
JavaScript kaqnintakama huk willayta qarquyta atichiy:
$('.alert').alert()
Utaq data
huk ñit'inapi atributokunawan alerta ukhupi , hawapi rikuchisqa hina:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Reparay huk willayta wichqaspaqa DOM kaqmanta hurqunqa.
Métodos
Imayna | Willay |
---|---|
$().alert() |
Huk willayta uyariyta ruwan ñit'iy ruwaykunamanta miray elementokunapi mayqinkunachus data-dismiss="alert" atributoyuq kanku. (Mana necesariochu data-api kaqpa auto-inicializacionninta llamk'achkaspa). |
$().alert('close') |
Huk willayta DOM kaqmanta hurquspa wichq'an. Sichus .fade chaymanta .show clasekuna elementopi kachkan, alerta manaraq hurqusqa kachkaptin chinkapunqa. |
$().alert('dispose') |
Huk elementopa alertanta chinkachin. |
$('.alert').alert('close')
Eventos nisqakuna
Bootstrap kaqpa willay plugin huk pisi ruwaykunata riqsichin willay ruwanaman enganche kaqpaq.
Ruwana | Willay |
---|---|
close.bs.alert |
Kay ruwayqa chaylla rawrarin mayk'aq close instancia método waqyasqa. |
closed.bs.alert |
Kay ruwayqa llamk'achisqa kachkan mayk'aq willay wichq'asqa kachkan (suyanqa CSS tikraykuna tukukunanta). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})