ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਟੋਸਟ

ਇੱਕ ਟੋਸਟ, ਇੱਕ ਹਲਕੇ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਸੁਚੇਤਨਾ ਸੰਦੇਸ਼ ਦੇ ਨਾਲ ਤੁਹਾਡੇ ਦਰਸ਼ਕਾਂ ਨੂੰ ਸੂਚਨਾਵਾਂ ਪੁਸ਼ ਕਰੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਟੋਸਟਸ ਹਲਕੇ ਭਾਰ ਵਾਲੀਆਂ ਸੂਚਨਾਵਾਂ ਹਨ ਜੋ ਪੁਸ਼ ਸੂਚਨਾਵਾਂ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ਜੋ ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟੌਪ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ ਦੁਆਰਾ ਪ੍ਰਸਿੱਧ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। ਉਹ flexbox ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ, ਇਸਲਈ ਉਹ ਇਕਸਾਰ ਅਤੇ ਸਥਿਤੀ ਵਿੱਚ ਆਸਾਨ ਹਨ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਟੋਸਟ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜਾਣਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:

  • ਟੋਸਟਸ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਲਈ ਚੁਣੇ ਜਾਂਦੇ ਹਨ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।
  • ਜੇਕਰ ਤੁਸੀਂ ਨਿਸ਼ਚਿਤ ਨਹੀਂ ਕਰਦੇ ਹੋ ਤਾਂ ਟੋਸਟ ਆਪਣੇ ਆਪ ਛੁਪ ਜਾਣਗੇ 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>

ਅਸੀਂ ਆਪਣੇ ਲਾਈਵ ਟੋਸਟ ਡੈਮੋ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ 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>

ਸਟੈਕਿੰਗ

ਤੁਸੀਂ ਟੋਸਟ ਨੂੰ ਇੱਕ ਟੋਸਟ ਕੰਟੇਨਰ ਵਿੱਚ ਲਪੇਟ ਕੇ ਸਟੈਕ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੁਝ ਸਪੇਸਿੰਗ ਜੋੜ ਦੇਵੇਗਾ।

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>

ਪਲੇਸਮੈਂਟ

ਟੋਸਟਾਂ ਨੂੰ ਕਸਟਮ CSS ਨਾਲ ਰੱਖੋ ਜਿਵੇਂ ਕਿ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੈ। ਉੱਪਰੀ ਸੱਜੇ ਅਕਸਰ ਸੂਚਨਾਵਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰਲਾ ਮੱਧ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ ਟੋਸਟ ਦਿਖਾਉਣ ਜਾ ਰਹੇ ਹੋ, ਤਾਂ ਪੋਜੀਸ਼ਨਿੰਗ ਸਟਾਈਲ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਰੱਖੋ .toast।

ਬੂਟਸਟਰੈਪ 11 ਮਿੰਟ ਪਹਿਲਾਂ
ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ! ਇਹ ਇੱਕ ਟੋਸਟ ਸੁਨੇਹਾ ਹੈ।
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।

CSS

ਵੇਰੀਏਬਲ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਤ ਹੋ ਰਹੀ 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);

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਟੋਸਟ ਸ਼ੁਰੂ ਕਰੋ:

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>

ਵਿਕਲਪ

ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਨਾਮ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ data-bs-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-animation="{value}"। ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਵਿਕਲਪਾਂ ਨੂੰ ਪਾਸ ਕਰਦੇ ਸਮੇਂ ਵਿਕਲਪ ਨਾਮ ਦੀ ਕੇਸ ਕਿਸਮ ਨੂੰ " ਕੈਮਲਕੇਸ " ਤੋਂ " ਕਬਾਬ-ਕੇਸ " ਵਿੱਚ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ । ਉਦਾਹਰਨ ਲਈ, ਦੀ data-bs-custom-class="beautifier"ਬਜਾਏ ਵਰਤੋ data-bs-customClass="beautifier".

ਬੂਟਸਟਰੈਪ 5.2.0 ਦੇ ਅਨੁਸਾਰ, ਸਾਰੇ ਭਾਗ ਇੱਕ ਪ੍ਰਯੋਗਾਤਮਕ ਰਿਜ਼ਰਵਡ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ data-bs-configਜੋ ਇੱਕ JSON ਸਟ੍ਰਿੰਗ ਦੇ ਰੂਪ ਵਿੱਚ ਸਧਾਰਨ ਕੰਪੋਨੈਂਟ ਕੌਂਫਿਗਰੇਸ਼ਨ ਨੂੰ ਰੱਖ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ ਤੱਤ 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 ਟੋਸਟ ਨੂੰ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਮਿਲੀਸਕਿੰਟ ਵਿੱਚ ਦੇਰੀ ਕਰੋ।

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।

ਢੰਗ ਵਰਣਨ
dispose ਕਿਸੇ ਤੱਤ ਦੇ ਟੋਸਟ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਤੁਹਾਡਾ ਟੋਸਟ DOM 'ਤੇ ਰਹੇਗਾ ਪਰ ਹੁਣ ਦਿਖਾਈ ਨਹੀਂ ਦੇਵੇਗਾ।
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...
})