ቶስትስ

በቶስት፣ ቀላል ክብደት ያለው እና በቀላሉ ሊበጅ በሚችል የማንቂያ መልእክት ለጎብኚዎችዎ ማስታወቂያዎችን ይግፉ።

በዚህ ገጽ ላይ

ቶስት በሞባይል እና በዴስክቶፕ ኦፕሬቲንግ ሲስተሞች ታዋቂ የሆኑትን የግፋ ማሳወቂያዎችን ለመኮረጅ የተነደፉ ቀላል ክብደት ማሳወቂያዎች ናቸው። እነሱ የተገነቡት በ flexbox ነው፣ ስለዚህ በቀላሉ ለመደርደር እና ለመደርደር ቀላል ናቸው።

አጠቃላይ እይታ

የቶስት ፕለጊን ሲጠቀሙ ማወቅ ያለብዎት ነገሮች፡-

ቶስት በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እርስዎ እራስዎ ማስጀመር አለብዎት ።
ካልገለጹ ቶስትስ በራስ-ሰር ይደብቃል autohide: false።

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

ምሳሌዎች

መሰረታዊ

ሊወጡ የሚችሉ እና ሊገመቱ የሚችሉ ቶስትዎችን ለማበረታታት፣ ራስጌ እና አካልን እንመክራለን። የቶስት ራስጌዎች ይጠቀማሉ display: flex፣ ይህም በቀላሉ የይዘት አሰላለፍ በመፍቀድ ለኅዳጎቻችን እና ለflexbox መገልገያዎች ምስጋና ይግባቸው።

ቶስት እርስዎ የሚፈልጉትን ያህል ተለዋዋጭ ናቸው እና በጣም ትንሽ አስፈላጊ ምልክት አላቸው። ቢያንስ፣ የእርስዎን "የተጠበሰ" ይዘት እንዲይዝ እና የስንብት ቁልፍን በብርቱ ለማበረታታት አንድ አካል እንፈልጋለን።

ሰላም ልዑል! ይህ የቶስት መልእክት ነው።

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>

ጡጦቹን በአግድም እና/ወይም በአቀባዊ ለማስተካከል በ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 ተለዋዋጮች አቀራረብ አካል፣ ቶስትስ አሁን .toastለተሻሻለ የአሁናዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የ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);

አጠቃቀም

ቶስትን በጃቫስክሪፕት ያስጀምሩ፡

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 " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። 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`	ቡሊያን	`true`	የ CSS ደብዝዝ ሽግግር ወደ ቶስት ተግብር።
`autohide`	ቡሊያን	`true`	ከመዘግየቱ በኋላ ቶስትን በራስ-ሰር ደብቅ።
`delay`	ቁጥር	`5000`	ቶስትን ከመደበቅዎ በፊት በሚሊሰከንዶች መዘግየት።

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

ዘዴ	መግለጫ
`dispose`	የአንድ ንጥረ ነገር ጥብስ ይደብቃል። የእርስዎ ቶስት በDOM ላይ ይቆያል ነገር ግን ከአሁን በኋላ አይታይም።
`getInstance`	ከDOM ኤለመንት ጋር የተገናኘውን የቶስት ምሳሌ ለማግኘት የሚያስችል የማይንቀሳቀስ ዘዴ። ለምሳሌ `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`፡ የBootstrap ቶስት ምሳሌን ይመልሳል።
`getOrCreateInstance`	ከDOM ኤለመንት ጋር የተገናኘውን የቶስት ምሳሌ እንድታገኙ ወይም አዲስ እንዲፈጥሩ የሚያስችልዎ የማይንቀሳቀስ ዘዴ፣ ካልተጀመረ። `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`የBootstrap ቶስት ምሳሌን ይመልሳል።
`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...
})