Holo i ka ʻike nui Holo i ka hoʻokele docs
in English

Toasts

E hoʻolaha i nā leka hoʻomaopopo i kāu poʻe malihini me kahi toast, kahi leka makaʻala māmā a maʻalahi hoʻi.

Ma kēia ʻaoʻao

ʻO nā Toasts nā leka hoʻomaopopo māmā i hoʻolālā ʻia e hoʻohālike i nā leka hoʻolaha i hoʻolaha ʻia e nā ʻōnaehana kelepona a me nā papa hana. Ua kūkulu ʻia lākou me ka flexbox, no laila ua maʻalahi lākou e align a hoʻonohonoho.

Nānā nui

Nā mea e ʻike ai i ka hoʻohana ʻana i ka plugin toast:

  • Hoʻokomo ʻia nā toasts no nā kumu hana, no laila pono ʻoe e hoʻomaka iā lākou iho .
  • E hūnā ʻokoʻa nā Toasts inā ʻaʻole ʻoe e kuhikuhi autohide: false.
ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Nā laʻana

Kumu

No ka hoʻoikaika ʻana i nā toast hiki ke hoʻonui a ʻike ʻia, paipai mākou i ke poʻo a me ke kino. Hoʻohana ʻia nā poʻomanaʻo Toast display: flex, e ʻae i ka alignment maʻalahi o ka ʻike e hoʻomaikaʻi i kā mākou margin a me flexbox pono.

Hiki ke maʻalahi nā toasts e like me kou makemake a he liʻiliʻi loa ka markup i koi ʻia. Ma ka liʻiliʻi loa, koi mākou i hoʻokahi mea e loaʻa i kāu ʻike "toasted" a paipai ikaika i kahi pihi hoʻokuʻu.

<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>

Ola

E kaomi i ke pihi ma lalo nei e hōʻike i kahi kīʻaha (i hoʻonoho ʻia me kā mākou mau pono hana ma ka ʻaoʻao ʻākau lalo) i hūnā ʻia e ka paʻamau me .hide.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

Alohilohi

ʻO nā mea hoʻomaʻemaʻe he translucent iki e hui pū me nā mea ma lalo o lākou.

<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>

Hoʻopaʻa

Hiki iā ʻoe ke hoʻopaʻa i nā toasts ma ke kāʻei ʻana iā lākou i loko o kahi pahu toast, kahi e hoʻonui ai i kahi ākea.

<div class="toast-container">
  <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>

Maʻiʻo maʻamau

Hoʻopilikino i kāu toasts ma ka wehe ʻana i nā ʻāpana ʻāpana, hoʻololi iā lākou me nā mea pono , a i ʻole ma ka hoʻohui ʻana i kāu markup ponoʻī. Ma ʻaneʻi ua hana mākou i kahi mea ʻai maʻalahi ma ka wehe ʻana i ka mea paʻamau .toast-header, hoʻohui i kahi kiʻi huna maʻamau mai Bootstrap Icons , a me ka hoʻohana ʻana i kekahi mau pono flexbox e hoʻoponopono i ka hoʻolālā.

<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>

ʻO kahi ʻē aʻe, hiki iā ʻoe ke hoʻohui i nā mana hou a me nā ʻāpana i nā toasts.

<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>

Nā kala kala

Ke kūkulu nei ma luna o ka laʻana i luna, hiki iā ʻoe ke hana i nā ʻano kala like ʻole me kā mākou kala a me kā mākou mau mea pono. Eia mākou i hoʻohui .bg-primarya .text-whitei ka .toast, a laila hoʻohui .btn-close-whitei kā mākou pihi pani. No ka ʻaoʻao ʻōniʻoniʻo, wehe mākou i ka palena paʻamau me .border-0.

<div class="toast align-items-center text-white 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>

Hoʻokomo

E kau i nā toasts me ka CSS maʻamau e like me kou makemake. Hoʻohana pinepine ʻia ka ʻākau luna no ka hoʻolaha ʻana, e like me ka waena waena. Inā ʻoe e hōʻike ana i hoʻokahi toast i ka manawa, e kau pono i nā ʻano hoʻonohonoho ma ka .toast.

Bootstrap 11 minuke aku nei
Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa. 
<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 position-absolute 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>

No nā ʻōnaehana e hoʻopuka hou i nā leka hoʻomaopopo, e noʻonoʻo e hoʻohana i kahi mea hoʻopili i hiki iā lākou ke hoʻopaʻa maʻalahi.

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

Hiki iā ʻoe ke leʻaleʻa me nā hāmeʻa flexbox e hoʻolike i nā toast ma ke alo a / a i ʻole ke kū pololei.

<!-- 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>

Hiki ke komo

Manaʻo ʻia ʻo Toasts i mea hoʻopau liʻiliʻi i kāu poʻe malihini a i ʻole mea hoʻohana, no laila e kōkua i ka poʻe me nā mea heluhelu pale a me nā ʻenehana kōkua like, pono ʻoe e hoʻopili i kāu toast ma kahi aria-liveʻāpana . Hoʻolaha ʻia nā hoʻololi ʻana i nā wahi ola (e like me ka hoʻopiʻi ʻana/hōʻano hou ʻana i kahi ʻāpana toast) e ka poʻe heluhelu pale me ka pono ʻole e hoʻoneʻe i ka manaʻo o ka mea hoʻohana a i ʻole ke hoʻopau i ka mea hoʻohana. Eia hou, e hoʻokomo aria-atomic="true"e hōʻoia i ka hoʻolaha mau ʻana o ka toast holoʻokoʻa ma ke ʻano he ʻāpana hoʻokahi (atomic), ma mua o ka hoʻolaha ʻana i ka mea i hoʻololi ʻia (hiki ke alakaʻi i nā pilikia inā ʻoe e hōʻano hou i kahi ʻāpana o ka ʻai o ka toast, a i ʻole ke hōʻike ʻana i ka maʻiʻo toast like. i kekahi manawa ma hope aku). Inā he mea koʻikoʻi ka ʻike e pono ai no ke kaʻina hana, e laʻa no ka papa inoa o nā hewa ma kahi ʻano, a laila e hoʻohana i ka ʻāpana makaʻalama kahi o ka toast.

E hoʻomanaʻo pono e loaʻa ka ʻāina ola i ka markup ma mua o ka hana ʻana a i ʻole ka hoʻonui ʻia ʻana o ka toast. Inā hoʻoikaika ikaika ʻoe i ka manawa like a hoʻokomo iā lākou i loko o ka ʻaoʻao, ʻaʻole e hoʻolaha ʻia e nā ʻenehana kōkua.

Pono ʻoe e hoʻololi i ka rolea me ka aria-livepae ma muli o ka ʻike. Inā he memo koʻikoʻi e like me ka hewa, e hoʻohana role="alert" aria-live="assertive", a i ʻole e hoʻohana role="status" aria-live="polite"i nā ʻano.

Ke hoʻololi nei ka ʻike āu e hōʻike nei, e hōʻoia e hōʻano hou i ka delaymanawa pau i loaʻa i nā mea hoʻohana ka manawa e heluhelu ai i ka toast.

<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>

I ka hoʻohana ʻana iā autohide: false, pono ʻoe e hoʻohui i kahi pihi pani e ʻae i nā mea hoʻohana e hoʻopau i ka toast.

<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>

ʻOiai hiki i ka ʻenehana ke hoʻohui i nā mana kikoʻī/actionable (e like me nā pihi hou a i ʻole nā ​​loulou) i kāu toast, pono ʻoe e pale i ka hana ʻana i kēia no ka huna ʻana i nā toasts. ʻOiai inā hāʻawi ʻoe i ka toast i kahi delaymanawa lōʻihi , paʻakikī paha nā mea hoʻohana ʻenehana kōkua i ka hiki ʻana i ka toast i ka manawa e hana ai (no ka mea, ʻaʻole i loaʻa ka manaʻo o ka toast ke hōʻike ʻia). Inā loaʻa iā ʻoe nā mana hou aʻe, paipai mākou e hoʻohana i ka toast me autohide: false.

Sass

Nā mea hoʻololi

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

Hoʻohana

E hoʻomaka i nā toast ma o JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-, e like me ka data-bs-animation="".

inoa ʻAno Default wehewehe
animation boolean true E noi i kahi hoʻololi fade CSS i ka toast
autohide boolean true Hūnā ʻakomi i ka ʻai
delay helu 5000 Hoʻopaneʻe ka hūnā ʻana i ka ʻai (ms)

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

hōʻike

Hōʻike i kahi mea ʻai meaʻai. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka toast (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.toasthanana). Pono ʻoe e kāhea lima i kēia ʻano hana, akā ʻaʻole e hōʻike ʻia kāu toast.

toast.show()

huna

Hūnā i ka ʻuala o kekahi mea. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka toast (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.toasthanana). Pono ʻoe e kelepona lima i kēia ʻano hana inā ʻoe i hana autohidei false.

toast.hide()

e hoolei aku

Hūnā i ka ʻuala o kekahi mea. E mau ana kāu toast ma ka DOM akā ʻaʻole e hōʻike hou ʻia.

toast.dispose()

getInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana scrollspy pili me kahi mea DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana scrollspy pili me kahi mea DOM, a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Nā hanana

ʻAno hanana wehewehe
show.bs.toast Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
shown.bs.toast Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka mea hoʻohana.
hide.bs.toast Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
hidden.bs.toast Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana mai ka mea hoʻohana. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})