in English

טאָסט

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

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

איבערבליק

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

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

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

ביישפילן

באַסיק

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

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

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

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

סטאַקינג

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

פּלייסמאַנט

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

באָאָטסטראַפּ 11 מינוט צוריק
העלא וועלט! דאָס איז אַ טאָסט אָנזאָג. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

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

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

דזשאַוואַסקריפּט נאַטור

באַניץ

Initialize toasts via JavaScript:

$('.toast').toast(option)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name Type Default Description
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast
delay number 500 Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

$().toast(options)

Attaches a toast handler to an element collection.

.toast('show')

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

$('#element').toast('show')

.toast('hide')

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

$('#element').toast('hide')

.toast('dispose')

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

$('#element').toast('dispose')

Events

Event Type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast דעם געשעעניש איז פייערד מיד ווען די hideבייַשפּיל אופֿן איז גערופן.
פאַרבאָרגן.בס.טאָסט דעם געשעעניש איז פייערד ווען די טאָסט איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})