خبرداري
دستياب ۽ لچڪدار خبرداري پيغامن جي دستيابي سان عام صارف جي عملن لاءِ لاڳاپيل راءِ جا پيغام مهيا ڪريو.
مثال
متن جي ڪنهن به ڊيگهه لاءِ الرٽ موجود آهن، انهي سان گڏ هڪ اختياري بند بٽڻ. مناسب اسٽائلنگ لاءِ، استعمال ڪريو اٺن مان ھڪڙو گھربل لاڳاپيل طبقن (مثال طور، .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()
})