Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Toasts

Jiri toast, dị fechaa ma dịkwa mfe ịhazi ozi ndị ọbịa gị.

Na ibe a

Toasts bụ ọkwa dị fechaa nke emebere iji ṅomie ọkwa ntanye nke sistemu eji arụ ọrụ ekwentị na desktọpụ na-ewu ewu. Ejiri flexbox rụọ ha, yabụ na ọ dị mfe ịhazi na ọnọdụ.

Nchịkọta

Ihe ị ga-ama mgbe ị na-eji ngwa mgbakwunye toast:

  • A na-abanye na toasts maka ebumnuche arụmọrụ, yabụ ị ga-ebido ya n'onwe gị .
  • Toast ga-ezo na-akpaghị aka ma ọ bụrụ na i kọwapụtaghị autohide: false.
Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Ihe atụ

Isi

Iji kwalite toasts nwere ike ịgbatị na nke enwere ike ịkọ, anyị na-akwado nkụnye eji isi mee na ahụ. Ndị isi toast na-eji display: flex, na-enye ohere ịhazi ọdịnaya dị mfe maka oke na ngwa flexbox anyị.

Toasts na-agbanwe dị ka ịchọrọ ma nwee obere akara achọrọ. Opekempe, anyị chọrọ otu mmewere iji nwee ọdịnaya “toasted” gị ma gbasie mbọ ike ka ịwepu bọtịnụ.

html 
<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>
Na mbụ, scripts anyị gbakwụnyere .hideklaasị iji zoo toast kpamkpam (ya na display:none, kama iji naanị ya opacity:0). Nke a adịkwaghị mkpa ugbu a. Agbanyeghị, maka ndakọrịta azụ, edemede anyị ga-aga n'ihu na-emegharị klaasị ahụ (n'agbanyeghị na ọ nweghị mkpa ọ dị maka ya) ruo na ụdị na-esote.

Ihe atụ dị ndụ

Pịa bọtịnụ dị n'okpuru iji gosi toast (nke edobere ya na akụrụngwa anyị na akuku aka nri ala) nke ezoro ezo na ndabara.

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

Anyị na-eji Javascript na-esonụ iji kpalite ngosi toast anyị dị ndụ:

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

    toast.show()
  })
}

translucent

Toasts dị ntakịrị translucent iji jikọta ya na ihe dị n'okpuru ha.

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

Nkwakọba

Ị nwere ike ikpokọta toasts site na ịtinye ha n'ime akpa toast, nke ga-agbakwunye oghere ụfọdụ.

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

Ọdịnaya ahaziri ahazi

Hazie toast gị site n'iwepụ ihe ndị dị n'okpuru, tweaking ha na akụrụngwa, ma ọ bụ site na ịgbakwunye akara nke gị. N'ebe a, anyị emepụtala toast dị mfe site na iwepu ndabara .toast-header, na-agbakwunye akara ngosi omenala na Bootstrap Icons , na iji ụfọdụ ngwa flexbox iji dozie nhazi ahụ.

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

N'aka nke ọzọ, ị nwekwara ike ịgbakwunye njikwa na akụrụngwa na toasts.

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

Atụmatụ agba

N'ịwulite na ihe atụ a dị n'elu, ị nwere ike ịmepụta atụmatụ agba toast dị iche iche na agba anyị na akụrụngwa ndabere anyị . Ebe a anyị atụkwasịla .text-bg-primaryna .toast, wee tinye .btn-close-whitena bọtịnụ nso anyị. Maka ihu kpụ ọkụ n'ọnụ, anyị na-ewepụ oke ndabara na .border-0.

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

Ndokwa

Tinye nri nri nwere CSS omenala dịka ịchọrọ ha. A na-ejikarị aka nri elu eme ihe ngosi, dịka ọ dị n'etiti etiti. Ọ bụrụ naanị na ị na-aga igosi otu tost n'otu oge, tinye ụdị ntọhapụ nke ọma na faịlụ .toast.

eriri akpụkpọ ụkwụ Nkeji 11 gara aga
Ndewo Ụwa! Nke a bụ ozi toast.
html 
<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>

Maka sistemụ na-ewepụta ọkwa ọkwa, tụlee iji ihe mkpuchi ka ha wee nwee ike ikpokọta ngwa ngwa.

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

Ị nwekwara ike nweta ọmarịcha site na ngwa flexbox iji kwado toasts kwụ n'ahịrị na/ma ọ bụ kwụ ọtọ.

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

Nnweta

Ezubere toasts ka ọ bụrụ obere nkwụsị nke ndị ọbịa ma ọ bụ ndị ọrụ gị, yabụ iji nyere ndị nwere ndị na-agụ ihuenyo na teknụzụ enyemaka yiri ya aka, ị kwesịrị ị kechie toast gị na aria-livempaghara . Ndị na-agụ ihuenyo na-ekwupụta mgbanwe na mpaghara ndị dị ndụ (dịka ịgbanye/imelite akụrụngwa toast) na-akpaghị aka na-enweghị mkpa ka onye ọrụ lekwasịrị anya ma ọ bụ kwụsịtụ onye ọrụ ahụ. Na mgbakwunye, gụnye aria-atomic="true"iji hụ na a na-ekwupụta ihe niile toast dị ka otu otu (atomic), kama ịkpọsa ihe gbanwere (nke nwere ike ibute nsogbu ma ọ bụrụ na ị na-emelite akụkụ nke ọdịnaya toast ahụ, ma ọ bụ ọ bụrụ na ị na-egosipụta otu ọdịnaya toast ahụ. n'oge gara aga). Ọ bụrụ na ozi achọrọ dị mkpa maka usoro ahụ, dịka ọmụmaatụ maka ndepụta njehie n'ụdị, wee jiri mpaghara njikerekama toast.

Rịba ama na mpaghara dị ndụ kwesịrị ịdị na akara ngosi tupu emelite ma ọ bụ emelite toast. Ọ bụrụ na ị na-ewepụta ha abụọ n'otu oge wee tinye ha n'ime ibe ahụ, teknụzụ enyemaka agaghị ekwupụta ha.

Ịkwesịrị ịmegharị rolena aria-liveọkwa dabere na ọdịnaya. Ọ bụrụ na ọ bụ ozi dị mkpa dị ka njehie, jiri role="alert" aria-live="assertive", ma ọ bụghị jiri role="status" aria-live="polite"njirimara.

Ka ọdịnaya ị na-egosipụta na-agbanwe, jide n'aka na imelite delayoge agwụla ka ndị ọrụ nwee oge zuru ezu iji gụọ 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>

Mgbe ị na-eji autohide: false, ị ga-atụkwasịrịrị bọtịnụ nso ka ndị ọrụ hapụ toast.

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

Ọ bụ ezie na teknụzụ ọ ga-ekwe omume ịgbakwunye njikwa na-elekwasị anya / arụ ọrụ (dị ka bọtịnụ ndị ọzọ ma ọ bụ njikọ) na toast gị, ị kwesịrị ịzere ime nke a maka ikpuchi toasts. Ọbụna ma ọ bụrụ na ị na-enye toast ogologo delayoge , ahụigodo na ndị ọrụ teknụzụ enyemaka nwere ike isiri gị ike iru toast n'oge iji mee ihe (ebe ọ bụ na toasts anaghị enweta anya mgbe egosipụtara ha). Ọ bụrụ na ị ga-enwerịrị njikwa ndị ọzọ, anyị na-akwado iji toast na autohide: false.

CSS

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke mgbanwe mgbanwe CSS nke Bootstrap, toasts na-eji mgbanwe CSS mpaghara .toastemeziwanye nhazi oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

  --#{$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

$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);

Ojiji

Melite toasts site na Javascript:

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

Na-akpalite

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị n'ime toast dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ dị n'èzí toast na-eji data-bs-targetdị ka egosiri n'okpuru:

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

Nhọrọ

Dịka enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript, ị nwere ike itinye aha nhọrọ na data-bs-, dịka na data-bs-animation="{value}". Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na " camelCase " gaa na " kebab-case " mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, jiri data-bs-custom-class="beautifier"kama data-bs-customClass="beautifier".

Dịka nke Bootstrap 5.2.0, akụrụngwa niile na-akwado njirimara data echekwara nnwaledata-bs-config nke nwere ike idobe nhazi akụrụngwa dị mfe dị ka eriri JSON. Mgbe mmewere nwere data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"njiri mara, uru ikpeazụ titlega-abụ 456na njirimara data dị iche ga-ewepụ ụkpụrụ enyere na data-bs-config. Na mgbakwunye, njirimara data dị adị nwere ike idobe ụkpụrụ JSON dịka data-bs-delay='{"show":0,"hide":150}'.

Aha Ụdị Ọdabara Nkọwa
animation boolean true Tinye mgbanwe mgbanwe CSS na toast.
autohide boolean true Zoo toast na-akpaghị aka ka egbuchara oge.
delay nọmba 5000 gbuo oge na millisekọnd tupu i zoo toast.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

Usoro Nkọwa
dispose Na-ezobe toast nke mmewere. Toast gị ga-anọgide na DOM mana ọ gaghị egosikwa ọzọ.
getInstance Usoro static nke na-enye gị ohere ịnweta ihe toast jikọtara ya na ihe DOM.
Ọmụmaatụ: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Na-eweghachi ihe atụ toast Bootstrap.
getOrCreateInstance Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe toast jikọtara ya na mmewere DOM, ma ọ bụ mepụta nke ọhụrụ, ọ bụrụ na ebidoghị ya.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Na-eweghachi ihe atụ toast Bootstrap.
hide Na-ezobe toast nke mmewere. Na-alaghachikwuru onye na-akpọ oku tupu ezobe toast n'ezie (ya bụ tupu hidden.bs.toastmmemme emee). Ị ga-eji aka kpọọ usoro a ma ọ bụrụ na autohideịmere false.
isShown Na-eweghachite boolean dịka steeti visibiliti toast siri dị.
show Na-ekpughe toast nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri toast n'ezie (ya bụ tupu shown.bs.toastmmemme emee). Ị ga-eji aka gị kpọọ usoro a, kama nke ahụ toast gị agaghị egosi.

Ihe omume

Ihe omume Nkọwa
hide.bs.toast A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
hidden.bs.toast A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ahụ toast.
show.bs.toast Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
shown.bs.toast A na-agbapụ mmemme a mgbe onye ọrụ mere ka toast ahụ hụ ya. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})