Saltar al contenido principal Salta a docs navegación
Check
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 .

html nisqapi 
<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.

Kawsaq ejemplo

Uraypi ñit'iy huk willayta rikuchinaykipaq (pakasqa chiru ukhupi estilokunawan qallariypaq), chaymanta qarquy (hinallataq chinkachiy) ruwasqa wichq'ana ñit'inawan.

html nisqapi 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Kay JavaScript llamk'achiyku kawsaq willay demo nisqayku qallarichinaykupaq:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Yanapakuy .alert-linkclaseta llamk'achiy usqhaylla tupaq llimp'i t'inkikuna mayqin willay ukhupi qunapaq.

html nisqapi 
<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.

html nisqapi 
<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.

html nisqapi 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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.

html nisqapi 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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 kawsaq demowan qhawayta atinki:

html nisqapi 
<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.

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, willakuykuna kunan kiti CSS tikraqkunata llamk'achinku .alertallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

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

Sass mixin

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

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

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

Sass llimp’i

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

Qallarichiy

Elementokunata alertas hina qallariy

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Huk willayta qarqunapaq sapalla propósito kaqpaq, mana componente makiwan qallariy JS API kaqnintakama necesariochu. , kaqwan llamk'aspa data-bs-dismiss="alert", componente kikillanmanta qallarinqa chaymanta allinta qarqusqa kanqa.

Aswan sut'inchaykunapaq qhaway triggers t'aqapi.

Gatillos

Despidoqa atikunmanmi dataatributowan huk botón kaqpi alerta ukhupi kay urapi rikuchisqa hina:

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

utaq huk botón hawa alerta kaqpi kay data-bs-targeturapi rikuchisqa hina llamk'achispa:

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

Reparay huk willayta wichqaspaqa DOM kaqmanta hurqunqa.

Métodos

Huk willay instanciata willay ruwaqwan ruwayta atikunki, kayhina:

const 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. Ejemplopaq: 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).

Uso básico: 1.1.

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})