مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

خبرداري

دستياب ۽ لچڪدار خبرداري پيغامن جي دستيابي سان عام صارف جي عملن لاءِ لاڳاپيل راءِ جا پيغام مهيا ڪريو.

مثال

متن جي ڪنهن به ڊيگهه لاءِ الرٽ موجود آهن، انهي سان گڏ هڪ اختياري بند بٽڻ. مناسب اسٽائلنگ لاءِ، استعمال ڪريو اٺن مان ھڪڙو گھربل لاڳاپيل طبقن (مثال طور، .alert-success). ان لائن برطرفي لاءِ، الرٽ استعمال ڪريو JavaScript پلگ ان .

<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ڪلاس سان لڪايو ويو آهي.

استعمال ڪريو .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>

اضافي مواد

خبردارين ۾ اضافي 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 يوٽيلٽيز ۽ بوٽ اسٽريپ آئڪن کي آئڪن سان خبردار ڪرڻ لاءِ. توھان جي شبیہیں ۽ مواد تي مدار رکندي، توھان چاھيو ٿا وڌيڪ افاديت يا ڪسٽم طرز شامل ڪريو.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 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 اسپرائٽ ٺاهڻ جھڙوڪ آساني سان ساڳيو آئڪن بار بار حوالي ڪرڻ لاءِ.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" 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" fill="currentColor" 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" fill="currentColor" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" 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ڪلاس.

توھان ھي ڏسي سگھوٿا عمل ۾ ھڪ لائيو ڊيمو سان:

<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"، عنصر ۾ شامل ڪرڻ جي پڪ ڪريو.

ساس

متغير

$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) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .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 رويي

ٽاريندڙ

جاوا اسڪرپٽ ذريعي خبرداري جي برطرفي کي فعال ڪريو:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

يا انتباہ جي اندرdata هڪ بٽڻ تي خاصيتن سان ، جيئن مٿي ڏيکاريل آهي:

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

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

طريقا

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

var myAlert = document.getElementById('myAlert')
var 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)
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

واقعا

بوٽ اسٽريپ جي خبرداري پلگ ان خبرداري ڪارڪردگي ۾ ڇڪڻ لاءِ ڪجھ واقعن کي بي نقاب ڪري ٿي.

واقعو وصف
close.bs.alert فوري طور تي باهه لڳندي آهي جڏهن closeمثال جو طريقو سڏيو ويندو آهي.
closed.bs.alert فائر ڪيو ويو جڏهن الرٽ بند ڪيو ويو آهي ۽ سي ايس ايس جي منتقلي مڪمل ڪئي وئي آهي.
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // 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()
})