توست

زىيارەتچىلەرگە توست ، يېنىك ۋە ئاسان تەڭشىگىلى بولىدىغان ئاگاھلاندۇرۇش ئۇچۇرى بىلەن ئۇقتۇرۇش قىلىڭ.

بۇ بەتتە

توستلار كۆچمە ۋە ئۈستەل يۈزى مەشغۇلات سىستېمىسى تەرىپىدىن ئومۇملاشقان ئىتتىرىش ئۇقتۇرۇشىنى تەقلىد قىلىپ لايىھەلەنگەن يېنىك ئۇقتۇرۇش. ئۇلار ئەۋرىشىم ساندۇق بىلەن ياسالغان ، شۇڭا ئۇلارنى توغرىلاش ۋە ئورۇنلاشتۇرۇش ئاسان.

ئومۇمىي چۈشەنچە

توپا قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:

توپا ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۇلارنى ئۆزىڭىز باشلىشىڭىز كېرەك .
ئەگەر سىز بەلگىلىمىسىڭىز توست ئاپتوماتىك يوشۇرۇلىدۇ autohide: false.

بۇ زاپچاسنىڭ كارتون ئۈنۈمى prefers-reduced-motionمېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ .

مىساللار

Basic

كېڭەيتكىلى بولىدىغان ۋە ئالدىن پەرەز قىلغىلى بولىدىغان توستلارنى رىغبەتلەندۈرۈش ئۈچۈن ، باش ۋە بەدەننى تەۋسىيە قىلىمىز. قىستۇرما ماۋزۇلار ئىشلىتىلىدۇ 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>

بىز تۆۋەندىكى JavaScript ئارقىلىق نەق مەيدان توستىمىزنى قوزغىتىمىز:

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>

Stacking

توپا قاچىسىنى ئوراپ قاچا-قۇچىلارغا ئوراپ قويسىڭىز بولىدۇ ، بۇ تىك ھالەتتە تىك بوشلۇق قوشىدۇ.

قاراڭ؟ مۇشۇنىڭغا ئوخشاش.

بېشىنى كۆتۈرۈپ ، توستلار ئاپتوماتىك تىزىدۇ

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>

خاس مەزمۇن

تارماق زاپچاسلارنى ئېلىۋېتىش ، ئاممىۋى مۇلازىمەتلەر بىلەن تەڭشەش ياكى ئۆزىڭىزنىڭ بەلگىسىنى قوشۇش ئارقىلىق توستىڭىزنى خاسلاشتۇرۇڭ . بۇ يەردە سۈكۈتتىكى ھالەتنى چىقىرىپ تاشلاش ، Bootstrap سىنبەلگىسىدىن.toast-header ئىختىيارى يوشۇرۇن سىنبەلگە قوشۇش ۋە بىر قىسىم ئەۋرىشىم قوراللاردىن پايدىلىنىپ ئورۇنلاشتۇرۇشنى تەڭشەش ئارقىلىق تېخىمۇ ئاددىي توپا قۇردۇق .

ياخشىمۇسىز ، دۇنيا! بۇ بىر توست ئۇچۇر.

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>

سىز يەنە flexbox ئەسلىھەلىرى بىلەن توستنى توغرىسىغا ۋە ياكى تىك ھالەتتە توغرىلىيالايسىز.

ياخشىمۇسىز ، دۇنيا! بۇ بىر توست ئۇچۇر.

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

ئۆزگەرگۈچى مىقدار

V5.2.0 گە قوشۇلدى

Bootstrap نىڭ تەرەققىي قىلىۋاتقان CSS ئۆزگەرگۈچى مىقدار ئۇسۇلىنىڭ بىر قىسمى بولۇش سۈپىتى بىلەن ، توستلار ھازىر يەرلىك CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىپ .toast، ھەقىقىي ۋاقىتتا خاسلاشتۇرۇشنى كۈچەيتىدۇ. CSS ئۆزگەرگۈچى مىقدارنىڭ قىممىتى Sass ئارقىلىق بەلگىلىنىدۇ ، شۇڭا Sass خاسلاشتۇرۇش يەنىلا قوللىنىدۇ.

  --#{$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 ئۆزگەرگۈچى مىقدار

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

ئىشلىتىش

JavaScript ئارقىلىق توستنى باشلاڭ:

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

Triggers

تۆۋەندە كۆرسىتىلگەندەك توستى ئىچىدىكى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>

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدىغان بولغاچقا ، تاللاش نامىغا data-bs-ئوخشاش قوشۇمچە ئىسىم قوشالايسىز data-bs-animation="{value}". تاللانما نامىنىڭ دېلو تۈرىنى سانلىق مەلۇمات خاسلىقى ئارقىلىق يوللىغاندا «تۆگە قېپى » دىن « kebab -case » غا ئۆزگەرتىشنى جەزملەشتۈرۈڭ. مەسىلەن ، data-bs-custom-class="beautifier"ئۇنىڭ ئورنىغا ئىشلىتىڭ data-bs-customClass="beautifier".

Bootstrap 5.2.0 گە قەدەر ، بارلىق زاپچاسلار JSON تىزمىسى سۈپىتىدە ئاددىي زاپچاس سەپلىمىسىنى ساقلىيالايدىغان تەجرىبە ساقلانغان سانلىق مەلۇمات خاسلىقىنى قوللايدۇ. data-bs-configئېلېمېنتنىڭ خاسلىقى 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`	boolean	`true`	توستقا CSS سۇس ئۆتۈشنى ئىشلىتىڭ.
`autohide`	boolean	`true`	كېچىكتۈرۈلگەندىن كېيىن توپىنى ئاپتوماتىك يوشۇرۇش.
`delay`	سان	`5000`	توستىنى يوشۇرۇشتىن بۇرۇن بىر سېكۇنتتا كېچىكىش.

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .

ئۇسۇل	چۈشەندۈرۈش
`dispose`	بىر ئېلېمېنتنىڭ توپىنى يوشۇرىدۇ. توستىڭىز DOM دا قالىدۇ ، ئەمما ئەمدى كۆرسەتمەيدۇ.
`getInstance`	تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن باغلانغان توست مىسالىغا ئېرىشەلەيسىز. مەسىلەن: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap toast مىسالنى قايتۇرىدۇ.
`getOrCreateInstance`	تۇراقلىق ئۇسۇل ، ئۇ دەسلەپكى قەدەمدە DOM ئېلېمېنتى بىلەن باغلانغان ياكى يېڭى ئۇسۇل قۇرالايسىز. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Bootstrap toast مىسالنى قايتۇرىدۇ.
`hide`	بىر ئېلېمېنتنىڭ توپىنى يوشۇرىدۇ. توست ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . `hidden.bs.toast`ئەگەر بۇ ئۇسۇلنى قوللانسىڭىز قولدا تېلېفون قىلىشىڭىز `autohide`كېرەك `false`.
`isShown`	توستنىڭ كۆرۈنۈش ھالىتىگە ئاساسەن ئاق رەڭ قايتۇرىدۇ.
`show`	بىر ئېلېمېنتنىڭ توپىنى ئاشكارىلايدۇ. توست ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) چاقىرغۇچىغا قايتىدۇ . `shown.bs.toast`سىز بۇ ئۇسۇلنى قولدا چاقىرىشىڭىز كېرەك ، ئەكسىچە توستىڭىز كۆرۈنمەيدۇ.

Events

Event	چۈشەندۈرۈش
`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...
})