ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ቶስት ዝበሃል ምግቢ

ንመፍለጢታት ናብ በጻሕትኻ ብቶስት ደፍእ፣ ቀሊልን ብቐሊሉ ዝመዓራረን ናይ መጠንቀቕታ መልእኽቲ።

ኣብዚ ገጽ

ቶስትስ ነቲ ብሞባይልን ዴስክቶፕን ስርዓተ ምምሕዳር ተፈታዊ ዝኾነ ናይ ምድፋእ መተሓሳሰቢ ንምምሳል ዝተዳለወ ቀለልቲ መተሓሳሰቢታት እዮም። ብፍሌክስቦክስ ዝተሃንጹ ስለዝኾኑ፡ ንምስላፍን ንምቕማጥን ቀለልቲ እዮም።

ሓፈሻዊ ትሕዝቶ

ቶስት ፕላግ-ኢን ክትጥቀም ከለኻ ክትፈልጦም ዘለካ ነገራት፤

  • ቶስት ብናይ ኣፈጻጽማ ምኽንያታት ምምራጽ ስለዝኾነ ባዕልኻ ክትጅምሮ ኣለካ .
  • እንተዘይገለጽካዮ ቶስት ብኣውቶማቲክ ክሕባእ ’ ዩ autohide: false።
ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ኣብነታት

መሰረታዊ

ዝዝርጋሕን ክትግምቶ ዝከኣልን ቶስት ንምትብባዕ፡ ርእስን ኣካልን ንመክር። Toast headers use display: flex, ሳላ ማርጅንን flexboxን ዩቲሊቲታትና ቀሊል ኣሰላልፋ ትሕዝቶ የፍቅድ።

ቶስት ከም ዘድልየካ ተዓጻጻፊ ኮይኑ ኣዝዩ ውሑድ ዝድለ ምልክት ኣለዎ። እንተወሓደ፡ “ዝተጠበሰ” ትሕዝቶኻ ዝሕዝ ሓደ ባእታ ንጠልብን ናይ ምብራር መጠወቒ ኣትሪርና ነተባብዕን።

<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ነይሮም። እዚ ሕጂ ድሕሪ ሕጂ ኣድላዪ ኣይኮነን። ይኹን እምበር፡ ንድሕሪት ዝምለስ ምትእስሳር፡ ስክሪፕትና ነቲ ክፍሊ ምቕያር (ዋላ’ኳ ግብራዊ ኣድላይነት እንተዘይሃለወ) ክሳብ ዝቕጽል ዓቢ ስሪት ክቕጽል እዩ።

ቀጥታዊ ኣብነት

ኣብ ታሕቲ ዘሎ ቁልፊ ብምጥዋቕ ብነባሪ ተሓቢኡ ዝነበረ ቶስት (ኣብ ታሕተዋይ የማናይ ኩርናዕ ምስ ዩቲሊቲታትና ዝተቐመጠ) ንምርኣይ።

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

ንቐጥታዊ ቶስት ዲሞና ንምጅማር ነዚ ዝስዕብ ጃቫስክሪፕት ንጥቀም፤

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

    toast.show()
  })
}

ፍርቂ ብርሃን ዝሓልፍ

ቶስት ምስቲ ኣብ ትሕቲኡ ዘሎ ንኽሕወስ ቁሩብ ፍርቂ ብርሃን ዝህብ እዩ።

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

ምድማር

ቶስት ኣብ ቶስት መትሓዚ ብምጥቕላል ክትድምር ትኽእል ኢኻ፣ እዚ ድማ ብቐጥታ ገለ ርሕቀት ክውስኽ እዩ።

<div class="toast-container">
  <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 Icons.toast-header ብሕታዊ ሕባእ ምልክት ብምውሳኽ ፣ ከምኡውን ገለ flexbox utilities ብምጥቃም ነቲ ኣቀማምጣ ብምትዕርራይ ዝቐለለ ቶስት ፈጢርና ኣለና ።

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

ከም ኣማራጺ፡ ኣብ ቶስት ተወሳኺ ቁጽጽርን ኣካላትን ክትውስኽ እውን ትኽእል ኢኻ።

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

ሕብራዊ ስርዓታት

ኣብዚ ኣብ ላዕሊ ዝተጠቕሰ ኣብነት ብምህናጽ፡ ብናይ ሕብርን ድሕረ ባይታን ዩቲሊቲታትና ዝተፈላለዩ ናይ ቶስት ሕብራዊ ስኬማት ክትፈጥሩ ትኽእሉ ኢኹም ። ኣብዚን ናብቲ , ወሲኽናዮ ኣለና፡ ድሕሪኡ ድማ .bg-primaryኣብቲ ናይ ምዕጻው መጠወቒና ወሲኽናዮ ኣለና። ንሓደ ንጹር ጫፍ፡ ነቲ ነባሪ ዶብ ብ ..text-white.toast.btn-close-white.border-0

<div class="toast align-items-center text-white 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.

ቡትስትራፕ ቅድሚ 11 ደቒቕ
ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ። 
<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 position-absolute 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>

ንዝያዳ መፍለጢታት ዘመንጩ ስርዓታት፡ ብቐሊሉ ክድምር ምእንቲ፡ መጠቕለሊ ባእታ ምጥቃም ኣብ ግምት ኣእቱ።

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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 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"፡ ምሉእ ቶስት ኩሉ ግዜ ከም ሓደ (ኣቶሚካዊ) ኣሃዱ ከም ዝእወጅ ንምርግጋጽ ኣካትት፣ ኣብ ክንዲ እንታይ ከም ዝተቐየረ ጥራይ ምእዋጅ (እዚ ድማ ንገለ ክፋል ትሕዝቶ ናይቲ ቶስት ጥራይ እንተዘመሓይሽካዮ፣ ወይ ተመሳሳሊ ትሕዝቶ ቶስት እንተርኢኻ ጸገም ከስዕብ ይኽእል እዩ። ኣብ ድሒሩ ዝመጽእ እዋን)። እቲ ዘድሊ ሓበሬታ ንመስርሕ ኣገዳሲ እንተኾይኑ፡ ንኣብነት ንዝርዝር ጌጋታት ኣብ ሓደ ቅጥዒ፡ ሽዑ ነቲ ናይ መጠንቀቕታ ክፍሊ ተጠቐምኣብ ክንዲ ቶስት።

ቅድሚ እቲ ቶስት ምፍጣሩ ወይ ምዕዳሙ እቲ ቀጥታዊ ዞባ ኣብቲ ምልክት ክህሉ ከምዘለዎ ኣስተውዕል ። ንኽልቲኦም ኣብ ሓደ እዋን ብዳይናሚክ መንገዲ እንተፈጢርካዮምን ኣብቲ ገጽ እንተወጊእካዮምን፡ ብሓፈሻ ብሓገዝቲ ቴክኖሎጂታት ኣይክእወጁን እዮም።

ከምኡ ውን ከከም ትሕዝቶኡ ነቲ roleand level ከተመዓራርዮ ኣለካ ። 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ከለኻ፡ ተጠቀምቲ ነቲ ቶስት ንኽስሕብዎ ዘኽእሎም ናይ ምዕጻው መጠወቒ ክትውስኽ ኣለካ።

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

ብቴክኒካዊ መዳይ ኣብ ቶስትካ ትኹረት ዝግበረሎም/ተግባራዊ ዝኾኑ ቁጽጽር (ከም ተወሳኺ መጠወቒታት ወይ መላግቦታት) ምውሳኽ ዝከኣል እኳ እንተኾነ፡ ንኣውቶሃይድ ቶስት ግን ነዚ ካብ ምግባር ክትቁጠብ ይግባእ። Even if you give the toast a long delaytimeout , ተጠቀምቲ ቁልፊ ሰሌዳን ሓጋዚ ቴክኖሎጅን ስጉምቲ ንምውሳድ ኣብ ግዚኡ ናብቲ ቶስት ንምብጻሕ ከጸግሞም ይኽእል እዩ (ቶስትታት ክረኣዩ ከለዉ ትኹረት ስለዘይረኽቡ)። ፍጹም ተወሳኺ ቁጽጽር ክህልወካ ኣለዎ እንተኾይኑ፡ ቶስት ምስ autohide: false.

ሳስ

ተለዋዋጢ ረቛሒታት

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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);

ኣጠቓቕማ

ቶስት ብመንገዲ ጃቫስክሪፕት ምጅማር፤

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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="".

ሽም ዓይነት ትሑዝ መግለፂ
animation ቡልያን ዝብል እዩ። true ኣብቲ ቶስት ናይ CSS ምድምሳስ ምስግጋር ተግባራዊ ግበር
autohide ቡልያን ዝብል እዩ። true ኣውቶማቲክ ነቲ ቶስት ሕባእዎ።
delay ቑጽሪ 5000 ምድንጓይ ምሕባእ ቶስት (ms)

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

አርኢ

ናይ ሓደ ባእታ ቶስት ይገልጽ። ቅድሚ እቲ ቶስት ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.toastፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። ነዚ ሜላ ብኢድካ ክትጽውዖ ኣለካ፣ ኣብ ክንድኡ ቶስትካ ኣይርአን እዩ።

toast.show()

ተሓባእ

ናይ ሓደ ባእታ ቶስት ይሓብእ። እቲ ቶስት ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.toastፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። ነዚ ሜላ ብኢድካ ክትጽውዖ ኣለካ እንተ autohideጌርካ false.

toast.hide()

ምጉሓፍ

ናይ ሓደ ባእታ ቶስት ይሓብእ። ቶስትካ ኣብ DOM ክጸንሕ እዩ ግን ድሕሪ ሕጂ ኣይክረአን እዩ።

toast.dispose()

getInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM element ዝተኣሳሰር ናይ ቶስት ምሳሌ ክትረክብ ዘኽእለካ ስታቲክ ሜላ

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance ዝብል ጽሑፍ ኣሎ።

ስታትቲክ ሜላ እዚ ድማ ነቲ ናይ ቶስት ምሳሌ ምስ ሓደ DOM ባእታ ዝተኣሳሰር ክትረኽቦ ዘኽእለካ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

ፍጻሜታት

ዓይነት ፍጻመ መግለፂ
show.bs.toast showእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
shown.bs.toast እዚ ፍጻመ እዚ ዝትኮስ እቲ ቶስት ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ።
hide.bs.toast እዚ ፍጻመ እዚ እቲ ናይ hideምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
hidden.bs.toast እዚ ፍጻመ ዝትኮስ እቲ ቶስት ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ። 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})