Tostadas

Willakuykunata watukuqniykikunaman tanqay huk tostadas kaqwan, huk llamp'u chaymanta mana sasa ruwanapaq willay willakuywan.

Kay p'anqapi

Tostadas nisqaqa llamp'u willaykuna ruwasqa tanqay willakuykunata qatipanapaq mayqinkunachus kuyuchina chaymanta escritorio llamkanakuna sistemakuna riqsisqa kanku. Paykunaqa flexbox kaqwan ruwasqa kanku, chayrayku mana sasachu chiqanchay chaymanta churay.

Hatun qhawariy

Imakuna yachanapaq tostadas plugin kaqwan llamk'achkaspa:

Tostadas kanku opt-in ruwayrayku, chayrayku qam kikiyki qallarichinayki tiyan .
Tostadas nisqakunaqa kikillanmantam pakakunqa mana niptikiqa autohide: false.

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Ejemplos

Qallariq

Tostadas extensibles y predecibles nisqakunata kallpachanapaq, huk umalliqta, cuerpota ima yuyaychayku. Toast headers use display: flex, permitiendo fácil alineación de contenido gracias a nuestras utilidades de margen y flexbox.

Tostadas son tan flexibles como necesitas y tienen muy poco marcado requerido. Aswan pisi kaqpi, huk elementollata mañayku “tostado” contenidoykita hap’inanpaq chaymanta sinchita kallpachayku huk botón de desestimación kaqmanta.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Ñawpaq, guionniyku dinamicamente claseta yaparqanku .hidehuk brindis hunt'asqa pakanankupaq (con display:none, aswanpas conlla kaqwan opacity:0). Kayqa kunanqa manañam necesarioñachu. Ichaqa, qhipaman tupachiypaq, scriptniyku claseta tikrayta qatinqa (mana ruwaypaq necesidad kaptinpas) qatiq hatun layakama.

Kawsaq ejemplo

Uraypi ñit'iy huk tostada rikuchinaykipaq (utilidadniykuwan uray paña k'uchupi churasqa) mayqinchus ñawpaqmanta pakasqa kachkan.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Kay JavaScript kaqwan llamk'achiyku kawsaq tostadas demoniykuta qallarichinaykupaq:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translúcido

Tostadas nisqakunaqa pisilla translúcidos nisqa kanku, chaywantaq urapi kaqkunawan chaqrukunku.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Apilamiento

Tostadas nisqakunataqa pilayta atinki tostadas nisqa p’uyñupi p’istuykuspa, chaytaq sayaqmanta wakin espaciamientota yapanqa.

Qaway? Kayhinalla.

Umakuna wichayman, tostadas kikinmanta pilakunqa

html nisqapi

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenido personalizado

Tostadasniykikunata ruway sub-componentes nisqakunata hurquspa, utilidades nisqawan allichaspa , utaq kikiyki marcata yapaspa. Kaypi huk aswan sasan tosta ruwasqayku ñawpaqmanta hurquspa .toast-header, huk sapanchasqa pakay icono yapaspa Bootstrap Iconos kaqmanta , chaymanta wakin flexbox yanapakuykunata llamk'achispa churayta allichaypaq.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Hukninpi, yapayta atikunkitaq huk controles chaymanta componentes tostadas kaqman.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Esquemas de colores

Hawa ejemplopi ruwaspa, hukniray tostadas color esquemakunata ruwayta atikunki color chaymanta qhipa yanapakuyniykuwan. Kaypi yaparqayku .text-bg-primarychay .toast, chaymanta yapasqayku .btn-close-whitewichq'ayniykuman. Huk llañu kantupaq, ñawpaqmanta churasqa k'itita .border-0.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Colocación

Tostadas nisqakunata CSS ruwasqawan churay imaynachus necesitasqaykiman hina. Paña pata kaqpiqa sapa kuti willaykunapaq llamk'achisqa, pata chawpi kaqhina. Sichus hayk’aqllapas huk brindisllata huk kutipi rikuchiyta munanki chayqa, churay estilokuna churayta chiqan kaqpi .toast.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Aswan willakuykunata ruwaq sistemakunapaq, huk p'istu elemento llamk'achiyta qhaway chaymanta mana sasachu pilayta atinku.

Qaway? Kayhinalla.

Umakuna wichayman, tostadas kikinmanta pilakunqa

html nisqapi

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Chantapas flexbox yanapakuykunawan sumaqllaña tariyta atinki tostadas horizontalmente chaymanta/utaq verticalmente alineanaykipaq.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accesibilidad nisqa

Tostadas huk huch'uy interrupciones kanankupaq ruwasqa kanku watukuqniykikunaman utaq llamk'aqkunaman, chayrayku yanapanapaq pantalla ñawiriqkunayuq chaymanta rikch'aq yanapakuy tecnologiakunayuq kaqkunaman, brindisniyki huk aria-livesuyupi p'istuykunayki tiyan . Kawsaq suyukunaman tikraykuna (kayhina huk componente tostadas inyectar/actualización) pantalla ñawiriqkunawan kikinmanta willasqa kanku mana ruwaqpa enfoquenta kuyuchiyta utaq wakhina ruwaqta interrumpiyta necesitaspa. Chaymantapas, yapay aria-atomic="true"llapa tostadas sapa kuti huk (atómica) unidad hina willasqa kananpaq, aswanpas ima tikrasqa kasqanmanta willakuyllamanta (kayqa sasachakuykunaman apayta atinman sichus huk parte tostadaspa contenidollanmanta musuqyachinki, utaq sichus kikin tostadas contenidota rikuchichkanki huk qipa pachakunapi). Sichus willakuy necesitasqa ruwanapaq importante kan, p.h. huk pantasqakuna listapaq huk formulario kaqpi, chaymanta componente alerta kaqwan llamk'achiytostadaspa rantinpi.

Reparay kawsaq suyuqa marcapi kanan tiyan manaraq tostadas ruwasqa utaq musuqchasqa kachkaptin. Sichus iskayninta huk pachallapi dinamicamente ruwanki chaymanta p'anqaman inyectanki, generalmente mana yanapakuq tecnologiakuna kaqwan willasqachu kanqa.

También necesitas adaptar el roley aria-livenivel dependiendo del contenido. Pantasqa hina ancha chaniyuq willay kaptinqa, llamk'achiy role="alert" aria-live="assertive", mana hinaqa role="status" aria-live="polite"atributukunata llamk'achiy.

Imaynachus rikuchisqayki contenido tikrakun, ama hina kaspa delaypacha tukukuyta musuqchay chaymanta ruwaqkuna suficiente tiempoyuq kanku tostadas ñawirinankupaq.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

, llamk'achkaspa autohide: false, huk wichq'ana ñit'inata yapanayki tiyan, llamk'aqkuna tostadata qarqunankupaq.

Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi.

html nisqapi

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Sichus técnicamente atikunman yapayta controles enfocables/accionables kaqmanta (kayhina yapasqa botones utaq t'inkikuna) tostadasniykipi, mana kayta ruwanaykichu tiyan autohiding tostadas kaqpaq. Aun if you give the toast a long delaytimeout , teclado chaymanta yanapakuq tecnologiamanta llamk'aqkuna sasachakunkuman chayanankupaq brindisman tiempopi ruwayta ruwanankupaq (imaraykuchus tostadas mana enfoqueta chaskinkuchu mayk'aqchus rikuchisqa kanku). Sichus absolutamente aswan controlkunayuq kanan tiyan, huk brindiswan llamk'achiyta yuyaychayku autohide: false.

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

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

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass variables nisqakuna

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Uso

JavaScript nisqawan tostadas nisqakunata qallariy:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Gatillos

Despidoqa atikunmanmi dataatributowan huk botón ukhupi tostadas ukhupi rikuchisqa hina:

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

utaq huk botón hawa tostadas kaqpi kay data-bs-targeturapi rikuchisqa hina:

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

Akllanakuna

Imaynachus akllanakuna willay layakuna utaq JavaScript kaqninta pasayta atikun, huk akllana sutita yapayta atikunki kayman data-bs-, imaynachus data-bs-animation="{value}". Aseguray akllana sutimanta caso laya “ camelCase ” kaqmanta “ kebab-case ” kaqman tikrayta mayk’aq akllanakunata atributos de datos kaqninta pasaspa. Ejemplopaq data-bs-custom-class="beautifier", data-bs-customClass="beautifier".

Bootstrap 5.2.0 kaqmanta, llapa componentakuna huk experimental waqaychasqa willay laya yanapakuyta yanapakunku data-bs-configmayqinchus JSON watiqa hina sanu componente ruwayta wasichayta atin. Huk elemento data-bs-config='{"delay":0, "title":123}'chaymanta data-bs-title="456"layakunayuq kaqtin, qhipa titlechanin kanqa 456chaymanta sapaq willay layakuna qusqa chanikunata llallichinqa data-bs-config. Chaymanta, kunan kaq willay layakuna JSON chanikunata wasichayta atinku kayhina data-bs-delay='{"show":0,"hide":150}'.

Suti	Niraq	Ñawpaqchasqa	Willay
`animation`	boolean nisqa	`true`	Huk CSS chinkachiy tikrayta tostadas kaqman churay.
`autohide`	boolean nisqa	`true`	Kikinmanta pakay brindista chay tardakuymanta qhipaman.
`delay`	yupay	`5000`	Tostadas manaraq pakachkaspa milisegundos nisqapi tardakuy.

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

Imayna	Willay
`dispose`	Huk elementopa brindisninta pakaykun. Brindisniykiqa DOM nisqapi qhipakunqa ichaqa manañam rikuchinqachu.
`getInstance`	Método estático mayqinchus huk DOM elementowan tinkisqa instancia tostadas kaqmanta jap'iyta atikun. Ejemplopaq: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Huk Bootstrap tostadas instanciata kutichin.
`getOrCreateInstance`	Método estático mayqinchus huk DOM elementowan tinkisqa tostadas instanciata hap'iyta atikun, utaq musuq ruwayta, sichus mana qallarichisqachu karqa. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Huk Bootstrap tostasqa instanciata kutichin.
`hide`	Huk elementopa brindisninta pakaykun. Llamaqman kutimun manaraq tostadas chiqamanta pakasqa kachkaptin (icha manaraq `hidden.bs.toast`ruway ruwakuchkaptin). Kay métodota makiwan waqyanayki tiyan sichus `autohide`ruwarqanki `false`.
`isShown`	Tostadpa rikuy kayninman hina huk booleanota kutichin.
`show`	Huk elementopa brindisnintam qawachin. Llamaqman kutimun manaraq tostadas chiqamanta rikuchisqa kachkaptin (icha manaraq `shown.bs.toast`ruway ruwakuchkaptin). Kay métodota makiwan waqyanayki tiyan, aswanpas brindisniyki mana rikuchinqachu.

Eventos nisqakuna

Ruwana	Willay
`hide.bs.toast`	Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq `hide`instancia método waqyasqa kachkan.
`hidden.bs.toast`	Kay ruwayqa llamk'achisqa kanqa mayk'aq tostada llamk'aqmanta pakasqa kayta tukusqa.
`show.bs.toast`	Kay ruwayqa chaylla rawrarin mayk'aq `show`instancia método waqyasqa.
`shown.bs.toast`	Kay ruwayqa ruphaykun mayk’aqchus brindis ruwasqa kachkan chayta ruwaqpaq.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})