טאָסט

פּוש נאָוטאַפאַקיישאַנז צו דיין וויזאַטערז מיט אַ טאָסט, אַ לייטווייט און לייכט קוסטאָמיזאַבלע פלינק אָנזאָג.

אויף דעם בלאַט

טאָוסטס זענען לייטווייט נאָוטאַפאַקיישאַנז דיזיינד צו נאָכקרימען די שטופּן נאָוטאַפאַקיישאַנז וואָס זענען פּאָפּולאַרייזד דורך רירעוודיק און דעסקטאַפּ אָפּערייטינג סיסטעמען. זיי זענען געבויט מיט פלעקסבאָקס, אַזוי זיי זענען גרינג צו ייַנרייען און שטעלע.

איבערבליק

טינגז צו וויסן ווען איר נוצן די טאָסט פּלוגין:

טאָאַסץ זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
טאָוסט וועט אויטאָמאַטיש באַהאַלטן אויב איר טאָן ניט ספּעציפיצירן autohide: false.

די אַנאַמיישאַן ווירקונג פון דעם קאָמפּאָנענט איז אָפענגיק אויף די prefers-reduced-motionמידיאַ אָנפֿרעג. זען די רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .

ביישפילן

באַסיק

צו מוטיקן עקסטענסיבלע און פּרידיקטאַבאַל טאָסט, מיר רעקאָמענדירן אַ כעדער און גוף. טאָסט כעדערז נוצן display: flex, אַלאַוינג גרינג אַליינמאַנט פון אינהאַלט דאַנק צו אונדזער גרענעץ און פלעקסבאָקס יוטילאַטיז.

טאָוסט זענען ווי פלעקסאַבאַל ווי איר דאַרפֿן און האָבן זייער קליין פארלאנגט מאַרקאַפּ. אין אַ מינימום, מיר דאַרפן אַ איין עלעמענט צו אַנטהאַלטן דיין "טאָוסטיד" אינהאַלט און שטארק מוטיקן אַ אָפּזאָגן קנעפּל.

העלא וועלט! דאָס איז אַ טאָסט אָנזאָג.

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>

ביז אַהער, אונדזער סקריפּס דינאַמיקאַללי צוגעגעבן די .hideקלאַס צו גאָר באַהאַלטן אַ טאָסט (מיט display:none, אלא ווי בלויז מיט opacity:0). דאס איז איצט ניט נייטיק ענימאָר. אָבער, פֿאַר קאַפּויער קאַמפּאַטאַבילאַטי, אונדזער שריפט וועט פאָרזעצן צו טוישן די קלאַס (כאָטש עס איז קיין פּראַקטיש נויט פֿאַר עס) ביז דער ווייַטער הויפּט ווערסיע.

לעבן בייַשפּיל

דריקט דעם קנעפּל אונטן צו ווייַזן אַ טאָסט (פּאַזישאַנד מיט אונדזער יוטילאַטיז אין דער נידעריקער רעכט ווינקל) וואָס איז פאַרבאָרגן דורך פעליקייַט.

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>

מיר נוצן די פאלגענדע דזשאַוואַסקריפּט צו צינגל אונדזער לעבן טאָסט דעמאָ:

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

    toast.show()
  })
}

טראַנסלוסאַנט

טאָוסט זענען אַ ביסל טראַנסלוסאַנט צו צונויפגיסן מיט וואָס איז אונטער זיי.

העלא וועלט! דאָס איז אַ טאָסט אָנזאָג.

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>

סטאַקינג

איר קענען אָנלייגן טאָסט דורך ראַפּינג זיי אין אַ טאָסט קאַנטיינער, וואָס וועט ווערטיקלי לייגן עטלעכע ספּייסינג.

זען? פּונקט ווי דאָס.

קעפ אַרויף, טאָוסט וועט אָנלייגן אויטאָמאַטיש

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>

מנהג אינהאַלט

קאַסטאַמייז דיין טאָסט דורך רימוווינג סאַב-קאָמפּאָנענטן, טוויקינג זיי מיט יוטילאַטיז אָדער דורך אַדינג דיין אייגענע מאַרקאַפּ. דאָ מיר האָבן באשאפן אַ סימפּלער טאָסט דורך רימוווינג די פעליקייַט .toast-header, אַדינג אַ מנהג באַהאַלטן ייקאַן פֿון Bootstrap Icons און ניצן עטלעכע פלעקסבאָקס יוטילאַטיז צו סטרויערן די אויסלייג.

העלא וועלט! דאָס איז אַ טאָסט אָנזאָג.

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>

אַלטערנאַטיוועלי, איר קענען אויך לייגן נאָך קאָנטראָלס און קאַמפּאָונאַנץ צו טאָסט.

העלא וועלט! דאָס איז אַ טאָסט אָנזאָג.

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>

קאָליר סקימז

מיט דעם ביישפּיל אויבן, איר קענען מאַכן פאַרשידענע טאָסט קאָלירן סקימז מיט אונדזער קאָליר און הינטערגרונט יוטילאַטיז. דאָ מיר האָבן צוגעלייגט .text-bg-primaryצו די .toast, און דעמאָלט צוגעגעבן .btn-close-whiteצו אונדזער נאָענט קנעפּל. פֿאַר אַ קרוכלע ברעג, מיר באַזייַטיקן די פעליקייַט גרענעץ מיט .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>

פּלייסמאַנט

שטעלן טאָסט מיט מנהג CSS ווי איר דאַרפֿן זיי. די שפּיץ רעכט איז אָפט געניצט פֿאַר נאָוטאַפאַקיישאַנז, ווי די שפּיץ מיטל. אויב איר וועט נאָר ווייַזן איין טאָסט אין אַ צייַט, שטעלן די פּאַזישאַנינג סטיילז רעכט אויף די .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>

פֿאַר סיסטעמען וואָס דזשענערייט מער נאָוטאַפאַקיישאַנז, באַטראַכטן ניצן אַ ראַפּינג עלעמענט אַזוי זיי קענען לייכט אָנלייגן.

זען? פּונקט ווי דאָס.

קעפ אַרויף, טאָוסט וועט אָנלייגן אויטאָמאַטיש

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>

איר קענען אויך באַקומען פאַנטאַזיע מיט פלעקסבאָקס יוטילאַטיז צו ייַנרייען טאָסט כאָריזאַנטאַלי און / אָדער ווערטיקלי.

העלא וועלט! דאָס איז אַ טאָסט אָנזאָג.

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>

אַקסעסאַביליטי

טאָוסטס זענען בדעה צו זיין קליין ינטעראַפּשאַנז פֿאַר דיין וויזאַטערז אָדער יוזערז, אַזוי צו העלפֿן יענע מיט פאַרשטעלן לייענער און ענלעך אַסיסטאַנץ טעקנאַלאַדזשיז, איר זאָל ייַנוויקלען דיין טאָסט אין אַ aria-liveגעגנט . ענדערונגען צו לעבן מקומות (אַזאַ ווי ינדזשעקטינג / אַפּדייטינג אַ טאָסט קאָמפּאָנענט) זענען אויטאָמאַטיש אַנאַונסט דורך פאַרשטעלן לייענער אָן נויט צו מאַך די באַניצער 'ס פאָקוס אָדער אַנדערש יבעררייַסן די באַניצער. אין דערצו, אַרייַננעמען aria-atomic="true"צו ענשור אַז די גאנצע טאָסט איז שטענדיק מודיע ווי אַ איין (אַטאָמישע) אַפּאַראַט, אלא ווי נאָר אַנאַונסינג וואָס איז געביטן (וואָס קען פירן צו פּראָבלעמס אויב איר נאָר דערהייַנטיקן טייל פון די טאָסט אינהאַלט, אָדער אויב איר ווייַזן די זעלבע אינהאַלט פון טאָסט. אין אַ שפּעטער צייט). אויב די נויטיק אינפֿאָרמאַציע איז וויכטיק פֿאַר דעם פּראָצעס, למשל פֿאַר אַ רשימה פון ערראָרס אין אַ פאָרעם, נוצן די פלינק קאָמפּאָנענטאַנשטאָט טאָסט.

באַמערקונג אַז די לעבן געגנט דאַרף זיין פאָרשטעלן אין די מאַרקאַפּ איידער די טאָסט איז דזשענערייטאַד אָדער דערהייַנטיקט. אויב איר דינאַמיקאַללי דזשענערייט ביידע אין דער זעלביקער צייט און אַרייַנשפּריצן זיי אין די בלאַט, זיי וועלן בכלל נישט זיין מודיע דורך אַסיסטאַטיוו טעקנאַלאַדזשיז.

איר אויך דאַרפֿן צו אַדאַפּט די roleאון aria-liveמדרגה דיפּענדינג אויף די אינהאַלט. אויב עס איז אַ וויכטיק אָנזאָג ווי אַ טעות, נוצן role="alert" aria-live="assertive", אַנדערש נוצן role="status" aria-live="polite"אַטריביוץ.

ווי דער אינהאַלט איר ווייַזן ענדערונגען, זיין זיכער צו דערהייַנטיקן די delayטיימאַוט אַזוי אַז די ניצערס האָבן גענוג צייט צו לייענען די טאָסט.

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

ווען איר נוצן autohide: false, איר מוזן לייגן אַ נאָענט קנעפּל צו לאָזן ניצערס צו אָפּזאָגן די טאָסט.

העלא וועלט! דאָס איז אַ טאָסט אָנזאָג.

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>

כאָטש טעקניקלי עס איז מעגלעך צו לייגן פאָוקיסטאַבאַל / אַקטיאָנאַבלע קאָנטראָלס (אַזאַ ווי נאָך קנעפּלעך אָדער לינקס) אין דיין טאָסט, איר זאָל ויסמיידן טאן דעם פֿאַר אַוטאָהיידינג טאָסט. אפילו אויב איר געבן די טאָסט אַ לאַנג delayטיימאַוט , קלאַוויאַטור און אַסיסטאַנט טעכנאָלאָגיע ניצערס קען געפֿינען עס שווער צו דערגרייכן די טאָסט אין צייט צו נעמען קאַמף (ווייַל טאָסט טאָן ניט באַקומען פאָקוס ווען זיי זענען געוויזן). אויב איר מוזן האָבן ווייַטער קאָנטראָלס, מיר רעקאָמענדירן צו נוצן אַ טאָסט מיט autohide: false.

CSS

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, טאָוסט איצט נוצן היגע CSS וועריאַבאַלז .toastפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

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

סאָס וועריאַבאַלז

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

באַניץ

ינישאַליזע טאָסט דורך דזשאַוואַסקריפּט:

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

טריגערס

דיסמיסאַל קענען זיין אַטשיווד מיט די dataאַטריביוט אויף אַ קנעפּל אין די טאָסט ווי דעמאַנסטרייטיד אונטן:

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

אָדער אויף אַ קנעפּל אַרויס די טאָסט ניצן די data-bs-targetווי דעמאַנסטרייטיד אונטן:

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

אָפּציעס

ווי אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, איר קענען לייגן אַן אָפּציע נאָמען צו data-bs-, ווי אין data-bs-animation="{value}". מאַכן זיכער צו טוישן די פאַל טיפּ פון די אָפּציע נאָמען פון " camelCase " צו " קעבאַב פאַל " ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, נוצן data-bs-custom-class="beautifier"אַנשטאָט פון data-bs-customClass="beautifier".

זינט Bootstrap 5.2.0, אַלע קאַמפּאָונאַנץ שטיצן אַן יקספּערמענאַל רעזערווירט דאַטן אַטריביוט data-bs-configוואָס קענען זיין אַ פּשוט קאָמפּאָנענט קאַנפיגיעריישאַן ווי אַ JSON שטריקל. ווען אַן עלעמענט האט data-bs-config='{"delay":0, "title":123}'און data-bs-title="456"אַטריביוץ, די לעצט titleווערט וועט זיין 456און די באַזונדער דאַטן אַטריביוץ וועט אָווועררייד וואַלועס געגעבן אויף data-bs-config. אין אַדישאַן, די יגזיסטינג דאַטן אַטריביוץ זענען ביכולת צו הויז JSON וואַלועס ווי data-bs-delay='{"show":0,"hide":150}'.

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
`animation`	בוליאַן	`true`	צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָסט.
`autohide`	בוליאַן	`true`	אויטאָמאַטיש באַהאַלטן די טאָסט נאָך די פאַרהאַלטן.
`delay`	נומער	`5000`	פאַרהאַלטן אין מיליסעקאַנדז איידער כיידינג די טאָסט.

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .

מעטאָד	באַשרייַבונג
`dispose`	באַהאַלט אַן עלעמענט ס טאָסט. דיין טאָסט וועט בלייבן אויף די DOM אָבער וועט נישט ווייַזן ענימאָר.
`getInstance`	סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די טאָסט בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט. פֿאַר בייַשפּיל: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`קערט אַ באָאָטסטראַפּ טאָסט בייַשפּיל.
`getOrCreateInstance`	סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די טאָסט בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט, אָדער שאַפֿן אַ נייַע, אויב עס איז נישט יניטיאַלייזד. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`קערט אַ באָאָטסטראַפּ טאָסט בייַשפּיל.
`hide`	באַהאַלט אַן עלעמענט ס טאָסט. קערט צו די קאַללער איידער די טאָסט איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די `hidden.bs.toast`געשעעניש אַקערז). איר האָבן צו מאַניואַלי רופן דעם אופֿן אויב איר געמאכט `autohide`צו `false`.
`isShown`	קערט אַ בוליאַן לויט צו טאָסט ס וויזאַביליטי שטאַט.
`show`	אַנטפּלעקט אַן עלעמענט ס טאָסט. קערט צו די קאַללער איידער די טאָסט איז אַקטשאַוואַלי געוויזן (ד"ה איידער די `shown.bs.toast`געשעעניש אַקערז). איר מוזן מאַניואַלי רופן דעם אופֿן, אַנשטאָט דיין טאָסט וועט נישט ווייַזן.

געשעענישן

געשעעניש	באַשרייַבונג
`hide.bs.toast`	דעם געשעעניש איז פייערד מיד ווען דער `hide`בייַשפּיל אופֿן איז גערופן.
`hidden.bs.toast`	דעם געשעעניש איז פייערד ווען די טאָסט איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער.
`show.bs.toast`	דער געשעעניש פירט גלייך ווען דער `show`בייַשפּיל אופֿן איז גערופן.
`shown.bs.toast`	דעם געשעעניש איז פייערד ווען די טאָסט איז געווען קענטיק צו דער באַניצער.

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