Saltar al contenido principal Salta a docs navegación
in English

Alertakuna

Quy contextual retroalimentación willakuykunata típico ruwaq ruwaykunapaq makilla kaqniyuq chaymanta flexible willay willakuykunawan.

Kay p'anqapi

Ejemplos

Alertakuna ima largo qillqapaqpas kan, chaymanta huk akllana wichq'ana botón. Allin estilo ruwanapaq, pusaq munasqa clasekuna contextualmanta hukninta llamk'achiy (kayhina, .alert-success). Chiru ukhupi qarqunapaq, willaykunata JavaScript 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 .visually-hiddenclasewan 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>

Iconos nisqakuna

Chaynallataq, flexbox yanapakuykunata chaymanta Bootstrap Iconokuna llamk'achiy atikunki iconokunawan willaykunata ruwanapaq. Iconokunaykimanta chaymanta contenidoykimanhina, aswan yanapakuykunata utaq ruwasqa estilokuna yapayta munankiman.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

¿Necesitan más de un icono para tus alertas? Yuyaykuy aswan Bootstrap Iconokuna llamk'achiyta chaymanta huk llaqta SVG sprite ruwayta chayhinata mana sasachakuspa kikin iconokuna sapa kuti referencianapaq.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</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.
  • Yanapakuy huk wichq'ana botón chaymanta .alert-dismissibleclase kaqpi, chaymanta yapan extra acolchado paña kaqpi alerta kaqpi chaymanta wichq'ana botón kaqpi churan.
  • Wichqana ñit'inapi, data-bs-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 rikunki kawsaq demowan:

<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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Huk willayta qarqusqa kaptinqa, elementoqa p'anqap ruwayninmanta tukuyninpi hurqusqam. Sichus huk teclado llamk'achiq willayta wichq'ana ñit'inawan wikch'un, paykunap yuyayninku qunqaylla chinkanqa chaymanta, maskaqmanta, p'anqa/qillqa qallariyman kutichiy. Kayrayku, huk JavaScript yapasqa churayta yuyaychayku mayqinchus closed.bs.alertruwaypaq uyarin chaymanta programaticamente focus()aswan allin kitipi p'anqapi churan. Sichus huk mana interactivo elementoman enfoqueta kuyuchiyta yuyachkanki mayqinchus normalmente mana enfoqueta chaskinchu, tabindex="-1"elementoman yapayta qhaway.

Sass

Variables nisqakuna

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Variante mixin

Kaywan kuskachasqa $theme-colorsllamk'achisqa contextual modificador clasekuna ruwanapaq alertasniykupaq.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Kutipayay

Mixinwan tikraq clasekunata paqarichiq alert-variant()llimp'i.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript nisqap ruwaynin

Gatillos

JavaScript kaqnintakama huk willayta qarquyta atichiy:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

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

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

Reparay huk willayta wichqaspaqa DOM kaqmanta hurqunqa.

Métodos

Huk willay instanciata willay ruwaqwan ruwayta atikunki, kayhina:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

Kayqa huk willayta uyariyta ruwan ñit'iy ruwaykunamanta miray elementokunapi mayqinkunachus data-bs-dismiss="alert"atributoyuq kanku. (Mana necesariochu data-api kaqpa auto-inicializacionninta llamk'achkaspa).

Imayna Willay
close Huk willayta DOM kaqmanta hurquspa wichq'an. Sichus .fadechaymanta .showclasekuna elementopi kachkan, alerta manaraq hurqusqa kachkaptin chinkapunqa.
dispose Huk elementopa alertanta chinkachin. (DOM elementopi waqaychasqa willayta hurqun)
getInstance Método estático mayqinchus huk DOM elementowan tinkisqa alerta instanciata jap'iyta atikun, kayhinata llamk'achiy atikunki:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Método estático mayqinchus huk DOM elementowan tinkisqa willay instanciata kutichin utaq musuq ruwan mana qallarisqa kaqtin. Chaytaqa kayhinatam servichikuwaq:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Eventos nisqakuna

Bootstrap kaqpa willay plugin huk pisi ruwaykunata riqsichin willay ruwanaman enganche kaqpaq.

Ruwana Willay
close.bs.alert closeInstancia método waqyasqa kaqtin chaylla rawrarin .
closed.bs.alert Willakuy wichq'asqa kaptin chaymanta CSS tikraykuna tukusqa kaptin llamk'achisqa. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})