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

ਚੇਤਾਵਨੀਆਂ

ਮੁੱਠੀ ਭਰ ਉਪਲਬਧ ਅਤੇ ਲਚਕਦਾਰ ਚੇਤਾਵਨੀ ਸੁਨੇਹਿਆਂ ਦੇ ਨਾਲ ਆਮ ਉਪਭੋਗਤਾ ਕਿਰਿਆਵਾਂ ਲਈ ਪ੍ਰਸੰਗਿਕ ਫੀਡਬੈਕ ਸੰਦੇਸ਼ ਪ੍ਰਦਾਨ ਕਰੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨਾਂ

ਚੇਤਾਵਨੀਆਂ ਟੈਕਸਟ ਦੀ ਕਿਸੇ ਵੀ ਲੰਬਾਈ ਲਈ ਉਪਲਬਧ ਹਨ, ਨਾਲ ਹੀ ਇੱਕ ਵਿਕਲਪਿਕ ਬੰਦ ਬਟਨ ਲਈ। ਸਹੀ ਸਟਾਈਲਿੰਗ ਲਈ, ਅੱਠ ਲੋੜੀਂਦੇ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰੋ (ਉਦਾਹਰਨ ਲਈ, .alert-success)। ਇਨਲਾਈਨ ਬਰਖਾਸਤਗੀ ਲਈ, ਚੇਤਾਵਨੀ JavaScript ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ

ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .visually-hiddenਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।

ਲਾਈਵ ਉਦਾਹਰਨ

ਇੱਕ ਚੇਤਾਵਨੀ ਦਿਖਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ (ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇਨਲਾਈਨ ਸਟਾਈਲ ਨਾਲ ਲੁਕਿਆ ਹੋਇਆ), ਫਿਰ ਬਿਲਟ-ਇਨ ਕਲੋਜ਼ ਬਟਨ ਨਾਲ ਇਸਨੂੰ ਖਾਰਜ (ਅਤੇ ਨਸ਼ਟ) ਕਰੋ।

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

ਅਸੀਂ ਆਪਣੇ ਲਾਈਵ ਚੇਤਾਵਨੀ ਡੈਮੋ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

.alert-linkਕਿਸੇ ਵੀ ਚੇਤਾਵਨੀ ਦੇ ਅੰਦਰ ਮੇਲ ਖਾਂਦੇ ਰੰਗਦਾਰ ਲਿੰਕਾਂ ਨੂੰ ਜਲਦੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

ਵਾਧੂ ਸਮੱਗਰੀ

ਚੇਤਾਵਨੀਆਂ ਵਿੱਚ ਸਿਰਲੇਖ, ਪੈਰੇ ਅਤੇ ਵਿਭਾਜਕ ਵਰਗੇ ਵਾਧੂ HTML ਤੱਤ ਵੀ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ।

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

ਆਈਕਾਨ

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

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

ਕੀ ਤੁਹਾਡੀਆਂ ਚੇਤਾਵਨੀਆਂ ਲਈ ਇੱਕ ਤੋਂ ਵੱਧ ਆਈਕਨਾਂ ਦੀ ਲੋੜ ਹੈ? ਹੋਰ ਬੂਟਸਟਰੈਪ ਆਈਕਾਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਅਤੇ ਇੱਕ ਸਥਾਨਕ SVG ਸਪ੍ਰਾਈਟ ਬਣਾਉਣ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ਤਾਂ ਜੋ ਉਹੀ ਆਈਕਾਨਾਂ ਦਾ ਵਾਰ-ਵਾਰ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾ ਸਕੇ।

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

ਖਾਰਜ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਚੇਤਾਵਨੀ JavaScript ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਕਿਸੇ ਵੀ ਚੇਤਾਵਨੀ ਇਨਲਾਈਨ ਨੂੰ ਖਾਰਜ ਕਰਨਾ ਸੰਭਵ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

  • ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਅਲਰਟ ਪਲੱਗਇਨ, ਜਾਂ ਕੰਪਾਇਲ ਕੀਤਾ ਬੂਟਸਟਰੈਪ JavaScript ਲੋਡ ਕੀਤਾ ਹੈ।
  • ਇੱਕ ਕਲੋਜ਼ ਬਟਨ ਅਤੇ .alert-dismissibleਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ, ਜੋ ਅਲਰਟ ਦੇ ਸੱਜੇ ਪਾਸੇ ਵਾਧੂ ਪੈਡਿੰਗ ਜੋੜਦਾ ਹੈ ਅਤੇ ਬੰਦ ਬਟਨ ਦੀ ਸਥਿਤੀ ਰੱਖਦਾ ਹੈ।
  • ਬੰਦ ਕਰੋ ਬਟਨ 'ਤੇ, data-bs-dismiss="alert"ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ, ਜੋ JavaScript ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਚਾਲੂ ਕਰਦੀ ਹੈ। <button>ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਹੀ ਵਿਵਹਾਰ ਲਈ ਇਸਦੇ ਨਾਲ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।
  • .fadeਚੇਤਾਵਨੀਆਂ ਨੂੰ ਖਾਰਜ ਕਰਨ ਵੇਲੇ ਐਨੀਮੇਟ ਕਰਨ ਲਈ, ਅਤੇ .showਕਲਾਸਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।

ਤੁਸੀਂ ਇਸਨੂੰ ਲਾਈਵ ਡੈਮੋ ਨਾਲ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ:

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
ਜਦੋਂ ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਖਾਰਜ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੱਤ ਨੂੰ ਪੰਨੇ ਦੇ ਢਾਂਚੇ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਬੰਦ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚੇਤਾਵਨੀ ਨੂੰ ਖਾਰਜ ਕਰਦਾ ਹੈ, ਤਾਂ ਉਹਨਾਂ ਦਾ ਫੋਕਸ ਅਚਾਨਕ ਖਤਮ ਹੋ ਜਾਵੇਗਾ ਅਤੇ, ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਪੰਨੇ/ਦਸਤਾਵੇਜ਼ ਦੀ ਸ਼ੁਰੂਆਤ 'ਤੇ ਰੀਸੈਟ ਹੋ ਜਾਵੇਗਾ। ਇਸ ਕਾਰਨ ਕਰਕੇ, ਅਸੀਂ ਵਾਧੂ JavaScript ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਜੋ ਇਵੈਂਟ ਨੂੰ ਸੁਣਦਾ ਹੈ closed.bs.alertਅਤੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਰੂਪ focus()ਵਿੱਚ ਪੰਨੇ ਵਿੱਚ ਸਭ ਤੋਂ ਢੁਕਵੇਂ ਸਥਾਨ 'ਤੇ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਫੋਕਸ ਨੂੰ ਗੈਰ-ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟ 'ਤੇ ਲਿਜਾਣ ਦੀ ਯੋਜਨਾ ਬਣਾ ਰਹੇ ਹੋ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਫੋਕਸ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਤਾਂ tabindex="-1"ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।

CSS

ਵੇਰੀਏਬਲ

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

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਤ ਹੋ ਰਹੀ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਚੇਤਾਵਨੀਆਂ ਹੁਣ .alertਵਧੀਆਂ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass ਵੇਰੀਏਬਲ

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

ਸਾਸ ਮਿਕਸਿਨ

$theme-colorsਸਾਡੀਆਂ ਚੇਤਾਵਨੀਆਂ ਲਈ ਪ੍ਰਸੰਗਿਕ ਸੋਧਕ ਕਲਾਸਾਂ ਬਣਾਉਣ ਲਈ ਇਸ ਦੇ ਨਾਲ ਸੁਮੇਲ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

ਸੱਸ ਲੂਪ

ਲੂਪ ਜੋ ਕਿ alert-variant()ਮਿਕਸਿਨ ਨਾਲ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਤਿਆਰ ਕਰਦਾ ਹੈ।

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript ਵਿਵਹਾਰ

ਸ਼ੁਰੂ ਕਰੋ

ਐਲੀਮੈਂਟਸ ਨੂੰ ਅਲਰਟ ਦੇ ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਕਰੋ

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਖਾਰਜ ਕਰਨ ਦੇ ਇੱਕੋ ਇੱਕ ਉਦੇਸ਼ ਲਈ, JS API ਦੁਆਰਾ ਕੰਪੋਨੈਂਟ ਨੂੰ ਹੱਥੀਂ ਸ਼ੁਰੂ ਕਰਨਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ data-bs-dismiss="alert", ਕੰਪੋਨੈਂਟ ਆਪਣੇ ਆਪ ਹੀ ਸ਼ੁਰੂ ਹੋ ਜਾਵੇਗਾ ਅਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਖਾਰਜ ਹੋ ਜਾਵੇਗਾ।

ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਟਰਿਗਰ ਸੈਕਸ਼ਨ ਦੇਖੋ ।

ਟਰਿੱਗਰ ਕਰਦਾ ਹੈ

ਹੇਠਾਂ ਦਰਸਾਏ ਅਨੁਸਾਰ ਚੇਤਾਵਨੀ ਦੇ ਅੰਦਰdata ਇੱਕ ਬਟਨ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਬਰਖਾਸਤਗੀ ਪ੍ਰਾਪਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ :

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

ਜਾਂ ਹੇਠਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਅਨੁਸਾਰ ਚੇਤਾਵਨੀ ਦੇ ਬਾਹਰ ਇੱਕ ਬਟਨ 'ਤੇ :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

ਨੋਟ ਕਰੋ ਕਿ ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਬੰਦ ਕਰਨ ਨਾਲ ਇਸਨੂੰ DOM ਤੋਂ ਹਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ।

ਢੰਗ

ਤੁਸੀਂ ਚੇਤਾਵਨੀ ਕੰਸਟਰਕਟਰ ਨਾਲ ਇੱਕ ਚੇਤਾਵਨੀ ਉਦਾਹਰਨ ਬਣਾ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ:

const bsAlert = new bootstrap.Alert('#myAlert')

ਇਹ data-bs-dismiss="alert"ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਉੱਤਰਾਧਿਕਾਰੀ ਤੱਤਾਂ 'ਤੇ ਕਲਿੱਕ ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਚੇਤਾਵਨੀ ਸੁਣਦਾ ਹੈ। (ਡਾਟਾ-ਏਪੀਆਈ ਦੀ ਸਵੈ-ਸ਼ੁਰੂਆਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ।)

ਢੰਗ ਵਰਣਨ
close ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ DOM ਤੋਂ ਹਟਾ ਕੇ ਬੰਦ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਐਲੀਮੈਂਟ 'ਤੇ .fadeਅਤੇ .showਕਲਾਸ ਮੌਜੂਦ ਹਨ, ਤਾਂ ਇਸ ਨੂੰ ਹਟਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਅਲਰਟ ਖਤਮ ਹੋ ਜਾਵੇਗਾ।
dispose ਕਿਸੇ ਤੱਤ ਦੀ ਚੇਤਾਵਨੀ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। (DOM ਤੱਤ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ)
getInstance ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ ਚੇਤਾਵਨੀ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ: bootstrap.Alert.getInstance(alert).
getOrCreateInstance ਸਥਿਰ ਵਿਧੀ ਜੋ ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਜੁੜੀ ਇੱਕ ਚੇਤਾਵਨੀ ਉਦਾਹਰਨ ਵਾਪਸ ਕਰਦੀ ਹੈ ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਇਸਨੂੰ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ। ਤੁਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ: bootstrap.Alert.getOrCreateInstance(element).

ਮੁੱਢਲੀ ਵਰਤੋਂ:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦਾ ਅਲਰਟ ਪਲੱਗਇਨ ਚੇਤਾਵਨੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦਾ ਹੈ।

ਘਟਨਾ ਵਰਣਨ
close.bs.alert closeਜਦੋਂ ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਤੁਰੰਤ ਅੱਗ ਲੱਗ ਜਾਂਦੀ ਹੈ।
closed.bs.alert ਜਦੋਂ ਚੇਤਾਵਨੀ ਬੰਦ ਹੋ ਗਈ ਹੈ ਅਤੇ CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋ ਗਿਆ ਹੈ ਤਾਂ ਫਾਇਰ ਕੀਤਾ ਗਿਆ। 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})