Source

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-onlyclasewan pakasqa.

Yanapakuy .alert-linkclaseta 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.

<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 munanutil.js . Huñusqa layapiqa kaytam churan.
  • Yanapakuy huk botón de despedido chaymanta .alert-dismissibleclase, chaymi yapan extra acolchado paña alerta kaqpi chaymanta .closebotón 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 .fadechaymanta .showclasekunata 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">&times;</span>
  </button>
</div>

JavaScript nisqap ruwaynin

Gatillos

JavaScript kaqnintakama huk willayta qarquyta atichiy:

$('.alert').alert()

Utaq datahuk ñit'inapi atributokunawan alerta ukhupi , hawapi rikuchisqa hina:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</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 .fadechaymanta .showclasekuna 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 closeinstancia 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...
})