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

ꯇꯣꯁ꯭ꯇꯁꯤꯡ꯫

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

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

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

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

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

  • ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯑꯁꯤ ꯄꯔꯐꯣꯃꯦꯟꯁꯀꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ ꯑꯣꯄꯁꯟ-ꯏꯟ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ .
  • ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ autohide: false.
ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯏꯐꯦꯛꯇ ꯑꯁꯤ prefers-reduced-motionꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯇꯉꯥꯏ ꯐꯗꯕ

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

ꯂꯥꯏꯕ ꯈꯨꯗꯝ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯟ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯨꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ (ꯃꯈꯥꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯀꯣꯟꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ) ꯎꯠꯀꯅꯤ꯫

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

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>

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

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

ꯇꯣꯁ꯭ꯇꯁꯤꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯐꯦꯟꯁꯤ ꯐꯪꯕꯁꯨ ꯌꯥꯏ꯫

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.

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

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

  --#{$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};

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

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

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 5.2.0ꯗꯒꯤ ꯍꯧꯅꯥ, ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯅꯥ JSON ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯊꯝꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯛꯁꯄꯤꯔꯤꯃꯦꯟꯇ ꯔꯤꯖꯔꯚ ꯇꯧꯔꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ data-bs-configꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ data-bs-config='{"delay":0, "title":123}'ꯑꯃꯁꯨꯡ data-bs-title="456"ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯔꯣꯏꯕꯥ titleꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯏꯒꯅꯤ 456ꯑꯃꯁꯨꯡ ꯇꯣꯉꯥꯅꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯅꯥ data-bs-config. ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡꯅꯥ data-bs-delay='{"show":0,"hide":150}'.

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
animation ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ true ꯇꯣꯁ꯭ꯠ ꯑꯗꯨꯗꯥ CSS ꯐꯦꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫
autohide ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ true ꯊꯦꯡꯊꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ꯫
delay ꯃꯁꯤꯡ 5000 ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯟꯗ꯭ꯔꯤꯉꯩ ꯃꯃꯥꯡꯗꯥ ꯃꯤꯂꯤꯁꯦꯀꯦꯟꯗꯁꯤꯡꯗꯥ ꯊꯦꯡꯊꯍꯜꯂꯨ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ .

ꯊꯧꯑꯪꯡ ꯋꯥꯔꯣꯜ
dispose ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯣꯁ꯭ꯠ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯇꯣꯁ꯭ꯠ ꯑꯗꯨ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯗꯥ ꯂꯩꯒꯅꯤ ꯑꯗꯨꯕꯨ ꯃꯈꯥ ꯇꯥꯅꯥ ꯎꯠꯂꯣꯏ꯫
getInstance DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯇꯣꯁ꯭ꯠ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫
ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯇꯣꯁ꯭ꯠ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯏ꯫
getOrCreateInstance DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯇꯣꯁ꯭ꯠ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯈꯤꯗꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ꯫
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯇꯣꯁ꯭ꯠ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯏ꯫
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...
})