ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯇꯣꯁ꯭ꯇꯁꯤꯡ꯫

ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ, ꯂꯥꯏꯠꯋꯦꯠ ꯑꯃꯁꯨꯡ ꯐꯖꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯚꯤꯖꯤꯇꯔꯁꯤꯡꯗꯥ ꯅꯣꯇꯤꯐꯤꯀꯦꯁꯅꯁꯤꯡ ꯄꯨꯁꯤꯜꯂꯨ꯫

ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯕꯥꯏꯜ ꯑꯃꯁꯨꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯞ ꯑꯣꯄꯔꯦꯇꯤꯡ ꯁꯤꯁ꯭ꯇꯦꯃꯁꯤꯡꯅꯥ ꯃꯤꯌꯥꯝꯅꯥ ꯄꯥꯝꯅꯕꯥ ꯑꯣꯏꯔꯛꯂꯕꯥ ꯄꯨꯁ ꯅꯣꯇ��ꯐꯤꯀꯦꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯁꯤꯟꯅꯕꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯥ ꯂꯥꯏꯠꯋꯦꯠ ꯅꯣꯇꯤꯐꯤꯀꯦꯁꯅꯁꯤꯡꯅꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯕꯅꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯗꯥ ꯂꯥꯌꯕꯥ ꯑꯣꯏ꯫

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯇꯣꯁ꯭ꯠ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯈꯪꯖꯤꯅꯒꯗꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ:

  • ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ ꯑꯣꯄꯁꯟ-ꯏꯟ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ .
  • ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ 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 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. _

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

ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯑꯣꯏꯕꯥ꯫

ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕ꯭ꯂꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯈꯔꯥ ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯑꯣꯏ꯫

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

ꯀꯁ꯭ꯇꯝ ꯀꯟꯇꯦꯟꯇ꯫

ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯂꯧꯊꯣꯛꯇꯨꯅꯥ, ꯃꯈꯣꯌꯕꯨ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇ꯭ꯌꯨꯏꯛ ꯇꯧꯗꯨꯅꯥ , ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯃꯥꯔꯀꯑꯥꯞ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯗꯨ ꯂꯧꯊꯣꯛꯇꯨꯅꯥ , ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯥꯏꯀꯅꯁꯤꯡꯗꯒꯤ.toast-header ꯀꯁ꯭ꯇꯝ ꯍꯥꯏꯗ ꯑꯥꯏꯀꯟ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ , ꯑꯃꯁꯨꯡ ꯂꯦꯑꯥꯎꯠ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ ꯁꯦꯃꯈ꯭ꯔꯦ꯫

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

ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯊꯝꯃꯨ꯫ ꯃꯊꯛꯀꯤ ꯑꯔꯣꯏꯕꯥ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ ꯅꯣꯇꯤꯐꯤꯀꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯊꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯑꯁꯤꯁꯨ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯑꯃꯗꯥ ꯇꯣꯁ꯭ꯠ ꯑꯃꯈꯛꯇꯃꯛ ꯎꯠꯄꯥ ꯇꯥꯔꯕꯗꯤ, ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯗꯨ .toast.

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯇꯧꯕꯥ꯫ ꯱꯱ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫
ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ! ꯃꯁꯤ ꯇꯣꯁ꯭ꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ꯫
<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"ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯍꯣꯡꯗꯣꯀꯈꯤꯕꯥ ꯑꯗꯨ ꯈꯛꯇꯥ ꯂꯥꯎꯊꯣꯀꯄꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯇꯣꯁ꯭ꯠ ꯄꯨꯝꯅꯃꯛ ꯃꯇꯝ ꯄꯨꯝꯕꯗꯥ (ꯑꯦꯇꯣꯃꯤꯛ) ꯌꯨꯅꯤꯠ ꯑꯃꯈꯛꯇꯃꯛ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯉꯃꯍꯟꯅꯕꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯣꯁ꯭ꯇꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯕꯗꯤ, ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯇꯣꯁ꯭ꯠ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯕꯗꯤ ꯃꯁꯤꯅꯥ ꯁꯃꯁ꯭ꯌꯥ ꯊꯣꯀꯍꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯇꯃꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯂꯥꯀꯄꯥ ꯃꯇꯃꯗꯥ)꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯄ꯭ꯔꯣꯁꯦꯁ ꯑꯗꯨꯒꯤꯗꯃꯛꯇꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯑꯁꯣꯌꯕꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯒꯤꯗꯃꯛ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯦꯂꯔꯠ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ꯇꯣꯁ꯭ꯇꯀꯤ ꯃꯍꯨꯠꯇꯥ꯫

ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯗ꯭ꯔꯤꯉꯩ ꯅꯠꯠꯔꯒꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯂꯥꯏꯚ ꯔꯤꯖꯟ ꯑꯗꯨ ꯃꯥꯔꯀꯑꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯃꯊꯧ ꯇꯥꯏ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯑꯃꯗꯥ ꯑꯅꯤꯃꯛ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯑꯣꯏꯅꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯗꯤ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯕꯨ ꯄꯦꯖ ꯑꯗꯨꯗꯥ ꯏꯅꯖꯦꯛꯇ ꯇꯧꯔꯕꯗꯤ, ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯍꯧꯁꯥꯅꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯂꯥꯎꯊꯣꯛꯂꯣꯏ꯫

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, ꯅꯍꯥꯛꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯅꯥ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯊꯥꯗꯣꯀꯄꯥ ꯌꯥꯅꯕꯥ ꯀ꯭ꯂꯣꯖ ꯕꯇꯟ ꯑꯃꯥ ꯍꯥꯄꯀꯗꯕꯅꯤ꯫

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

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$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(0, 0, 0, .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(0, 0, 0, .05);

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ 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()

ꯗꯤꯁꯄꯣꯖ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯗꯥ ꯂꯩꯒꯅꯤ ꯑꯗꯨꯕꯨ ꯃꯈꯥ ꯇꯥꯅꯥ ꯎꯠꯂꯣꯏ꯫

toast.dispose()

getInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫

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...
})