مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
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>

اسان هيٺ ڏنل جاوا اسڪرپٽ استعمال ڪريون ٿا اسان جي لائيو الرٽ ڊيمو کي متحرڪ ڪرڻ لاءِ:

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>

توهان جي خبردارين لاءِ هڪ کان وڌيڪ آئڪن جي ضرورت آهي؟ وڌيڪ Bootstrap Icons استعمال ڪرڻ تي غور ڪريو ۽ مقامي 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 پلگ ان استعمال ڪندي، ڪنهن به الرٽ ان لائن کي رد ڪرڻ ممڪن آهي. هتي ڪيئن آهي:

  • پڪ ڪريو ته توھان لوڊ ڪيو آھي الرٽ پلگ ان، يا مرتب ڪيل بوٽ اسٽريپ جاوا اسڪرپٽ.
  • بند ڪريو بٽڻ ۽ .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>
جڏهن هڪ خبرداري برطرف ڪيو ويندو آهي، عنصر مڪمل طور تي صفحي جي جوڙجڪ مان هٽايو ويندو آهي. جيڪڏهن ڪيبورڊ استعمال ڪندڙ بند بٽڻ کي استعمال ڪندي الرٽ کي رد ڪري ٿو، ته اوچتو انهن جو ڌيان گم ٿي ويندو ۽، برائوزر تي منحصر ڪري، صفحي/دستاويزن جي شروعات تي ري سيٽ ڪيو ويندو. انهي سبب لاء، اسان اضافي جاوا اسڪرپٽ شامل ڪرڻ جي صلاح ڏيو ٿا جيڪو closed.bs.alertايونٽ لاء ٻڌندو آهي ۽ پروگرام جي ترتيب focus()سان صفحي ۾ سڀ کان وڌيڪ مناسب جڳهه تي سيٽ ڪندو آهي. جيڪڏھن توھان رٿابندي ڪري رھيا آھيو توجہ ھڪڙي غير متعامل عنصر ڏانھن جيڪو عام طور تي فوڪس حاصل نٿو ڪري tabindex="-1"، عنصر ۾ شامل ڪرڻ جي پڪ ڪريو.

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي يافته 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};

سس متغير

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

نوٽ ڪريو ته انتباہ بند ڪرڻ ان کي ڊوم مان ڪڍي ڇڏيندو.

طريقا

توھان ٺاھي سگھوٿا خبرداري مثال ٺاھيندڙ سان گڏ، مثال طور:

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

هي هڪ خبرداري ٻڌندو آهي ڪلڪ ٿيندڙ واقعن لاءِ اولاد جي عنصرن تي جيڪي data-bs-dismiss="alert"خاصيتون آهن. (ضروري ناهي جڏهن ڊيٽا-اي پي آئي جي خودڪار شروعاتي استعمال ڪندي.)

طريقو وصف
close ان کي DOM مان هٽائڻ سان هڪ خبرداري کي بند ڪري ٿو. جيڪڏهن .fade۽ .showطبقن عنصر تي موجود آهن، خبردار ٿيڻ کان اڳ ختم ٿي ويندو.
dispose هڪ عنصر جي خبرداري کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)
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 فائر ڪيو ويو جڏهن الرٽ بند ڪيو ويو آهي ۽ سي ايس ايس جي منتقلي مڪمل ڪئي وئي آهي. 
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()
})