मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
Check
in English

अलर्ट कर दिहल गइल बा

उपलब्ध आ लचीला अलर्ट संदेश सभ के मुट्ठी भर के साथ ठेठ प्रयोगकर्ता क्रिया सभ खातिर संदर्भ प्रतिक्रिया संदेश उपलब्ध करावल।

एह पन्ना पर दिहल गइल बा

उदाहरण खातिर दिहल गइल बा

कवनो भी लंबाई के पाठ खातिर अलर्ट उपलब्ध बा, साथ ही साथ वैकल्पिक बंद बटन भी उपलब्ध बा। सही स्टाइलिंग खातिर, आठ गो जरूरी संदर्भ वर्ग सभ में से कौनों एक के इस्तेमाल करीं (जइसे कि, .alert-success)। इनलाइन बर्खास्तगी खातिर, अलर्ट जावास्क्रिप्ट प्लगइन के इस्तेमाल करीं ।

एचटीएमएल के बा 
<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क्लास के साथ छिपल अतिरिक्त पाठ।

लाइव उदाहरण बा

एगो अलर्ट देखावे खातिर नीचे दिहल बटन पर क्लिक करीं (शुरुआत करे खातिर इनलाइन स्टाइल सभ के साथ छिपल), फिर बिल्ट-इन बंद बटन से एकरा के खारिज करीं (आ नष्ट करीं)।

एचटीएमएल के बा 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

हमनी के लाइव अलर्ट डेमो के ट्रिगर करे खातिर निम्नलिखित जावास्क्रिप्ट के इस्तेमाल करेनी जा:

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कवनो अलर्ट के भीतर जल्दी से मिलान रंगीन लिंक उपलब्ध करावे खातिर उपयोगिता वर्ग के इस्तेमाल करीं ।

एचटीएमएल के बा 
<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>

अतिरिक्त सामग्री के बारे में बतावल गइल बा

अलर्ट सभ में हेडिंग, पैराग्राफ आ डिवाइडर नियर अतिरिक्त एचटीएमएल तत्व भी हो सके लें।

एचटीएमएल के बा 
<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>

आइकन के बारे में बतावल गइल बा

एही तरे, आप फ्लेक्सबॉक्स यूटिलिटीज अवुरी बूटस्ट्रैप आइकन के इस्तेमाल क के आइकन के संगे अलर्ट बना सकतानी। अपना आइकन आ सामग्री के आधार पर, रउआँ अउरी उपयोगिता भा कस्टम शैली जोड़ल चाहब।

एचटीएमएल के बा 
<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 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>

बर्खास्त कइल जा रहल बा

अलर्ट जावास्क्रिप्ट प्लगइन के इस्तेमाल से कवनो अलर्ट के इनलाइन खारिज कइल संभव बा. इहाँ कइसे बतावल गइल बा:

  • सुनिश्चित करीं कि रउआँ अलर्ट प्लगइन, या संकलित बूटस्ट्रैप जावास्क्रिप्ट लोड कइले बानी।
  • एगो क्लोज बटन आ क्लास जोड़ीं .alert-dismissible, जवन अलर्ट के दाहिना ओर एक्स्ट्रा पैडिंग जोड़ देला आ क्लोज बटन के पोजीशन देला।
  • बंद बटन पर, data-bs-dismiss="alert"विशेषता जोड़ल जाला, जवन जावास्क्रिप्ट के कामकाज के ट्रिगर करेला। <button>सभ डिवाइस सभ में सही व्यवहार खातिर तत्व के एकरे साथ इस्तेमाल जरूर करीं ।
  • .fadeखारिज करत समय अलर्ट के एनिमेट करे खातिर, आ .showक्लास जरूर जोड़ल जाला ।

रउआँ एकरा के लाइव डेमो के साथ एक्शन में देख सकत बानी:

एचटीएमएल के बा 
<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>
जब कौनों अलर्ट खारिज हो जाला तब पन्ना संरचना से तत्व पूरा तरीका से हटा दिहल जाला। अगर कौनों कीबोर्ड यूजर बंद बटन के इस्तेमाल से अलर्ट के खारिज क देला तब अचानक ओकर फोकस खतम हो जाई आ ब्राउजर के आधार पर पन्ना/दस्तावेज के सुरुआत पर रीसेट हो जाई। एह कारण से हमनी के सलाह बा कि अतिरिक्त जावास्क्रिप्ट के शामिल कइल जाव जवन closed.bs.alertघटना खातिर सुनेला आ प्रोग्रामेटिक focus()रूप से पन्ना में सबसे उपयुक्त स्थान पर सेट करेला। अगर रउआँ फोकस के कौनों गैर-इंटरएक्टिव तत्व पर ले जाए के योजना बनावत बानी जे सामान्य रूप से फोकस ना पावे ला, tabindex="-1"तत्व में जोड़ल जरूर करीं।

सीएसएस के बा

चर के बारे में बतावल गइल बा

v5.2.0 में जोड़ल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, अब अलर्ट सभ .alertमें बढ़ल रियल-टाइम कस्टमाइजेशन खातिर लोकल सीएसएस चर सभ के ऑन के इस्तेमाल कइल जाला। 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};

ससस चर के बारे में बतावल गइल बा

$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);
  }
}

जावास्क्रिप्ट व्यवहार के बारे में बतावल गइल बा

इनिशियलाइज कइल जाव

तत्वन के अलर्ट के रूप में आरंभ करीं

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

अलर्ट के खारिज करे के एकमात्र उद्देश्य खातिर, जेएस एपीआई के माध्यम से घटक के मैन्युअल रूप से इनिशियलाइज कइल जरूरी नइखे। के उपयोग करके 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>

ध्यान रहे कि अलर्ट बंद कईला से ओकरा के डीओएम से हटा दिहल जाई।

विधियन के बारे में बतावल गइल बा

रउआँ अलर्ट कंस्ट्रक्टर के साथ एगो अलर्ट इंस्टेंस बना सकत बानी, उदाहरण खातिर:

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

एह से एगो अलर्ट वंशज तत्व सभ पर क्लिक इवेंट सभ खातिर सुनल जाला जेह में data-bs-dismiss="alert"एट्रिब्यूट होला। (डेटा-एपीआई के ऑटो-इनिशियलाइजेशन के इस्तेमाल करत घरी जरूरी नइखे।)

विधि बिबरन
close कवनो अलर्ट के डीओएम से हटा के बंद कर देला। अगर तत्व पर .fadeआ .showक्लास मौजूद होखे तब हटावे से पहिले अलर्ट फीका हो जाई।
dispose कवनो तत्व के अलर्ट के नष्ट कर देला। (DOM तत्व पर संग्रहीत डेटा के हटा देला)
getInstance स्थिर विधि जवन रउआ के कवनो डोम तत्व से जुड़ल अलर्ट इंस्टेंस पावे के अनुमति देला। जइसे कि: 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 जब अलर्ट बंद हो गइल होखे आ सीएसएस संक्रमण पूरा हो गइल होखे तब फायर कइल जाला। 
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()
})