مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

انتباہات

مٹھی بھر دستیاب اور لچکدار انتباہی پیغامات کے ساتھ عام صارف کی کارروائیوں کے لیے متعلقہ تاثرات کے پیغامات فراہم کریں۔

اس صفحہ پر

مثالیں

متن کی کسی بھی لمبائی کے ساتھ ساتھ اختیاری بند بٹن کے لیے الرٹس دستیاب ہیں۔ مناسب انداز کے لیے، آٹھ مطلوبہ سیاق و سباق کی کلاسوں میں سے ایک استعمال کریں (مثلاً، .alert-success)۔ ان لائن برخاستگی کے لیے، الرٹس جاوا اسکرپٹ پلگ ان استعمال کریں ۔

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>

ہم اپنے لائیو الرٹ ڈیمو کو متحرک کرنے کے لیے درج ذیل جاوا اسکرپٹ کا استعمال کرتے ہیں:

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>

شبیہیں

اسی طرح، آپ آئیکنز کے ساتھ الرٹس بنانے کے لیے فلیکس باکس یوٹیلیٹیز اور بوٹسٹریپ آئیکنز استعمال کر سکتے ہیں۔ آپ کے شبیہیں اور مواد پر منحصر ہے، آپ مزید افادیت یا حسب ضرورت طرزیں شامل کرنا چاہتے ہیں۔

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>

اپنے انتباہات کے لیے ایک سے زیادہ آئیکن کی ضرورت ہے؟ مزید بوٹسٹریپ آئیکنز استعمال کرنے اور مقامی ایس وی جی اسپرائٹ بنانے پر غور کریں تاکہ انہی آئیکنز کا بار بار حوالہ دیا جا سکے۔

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 پلگ ان کا استعمال کرتے ہوئے، کسی بھی الرٹ ان لائن کو برخاست کرنا ممکن ہے۔ یہ ہے طریقہ:

  • یقینی بنائیں کہ آپ نے الرٹ پلگ ان، یا مرتب کردہ بوٹسٹریپ جاوا اسکرپٹ لوڈ کیا ہے۔
  • ایک کلوز بٹن اور .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"تو عنصر میں شامل کرنا یقینی بنائیں۔

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے حصے کے طور پر، الرٹس اب مقامی CSS متغیرات .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};

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

جاوا اسکرپٹ کا رویہ

شروع کرنا

عناصر کو انتباہات کے طور پر شروع کریں۔

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