ئاگادارکردنەوەکان
پەیامی فیدباکەکانی ناوەڕۆک بۆ کردارە ئاساییەکانی بەکارهێنەر لەگەڵ مشتێک پەیامی ئاگادارکردنەوەی بەردەست و نەرم دابین بکە.
نموونە
ئاگادارکردنەوەکان بۆ هەر درێژی دەقێک بەردەستە، هەروەها دوگمەی داخستنی ئیختیاری. بۆ ستایلکردنی دروست، یەکێک لە هەشت پۆلی پێویستی کۆنتێکست بەکاربهێنە (بۆ نموونە، .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>
ئێمە ئەم جاڤاسکڕێپتەی خوارەوە بەکاردەهێنین بۆ دەستپێکردنی دیمۆی ئاگادارکردنەوەی ڕاستەوخۆمان:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
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>
ناوەڕۆکی زیادە
هەروەها ئاگادارکردنەوەکان دەتوانن توخمەکانی HTMLی زیادە وەک سەردێڕ، پەرەگراف و دابەشکەر لەخۆ بگرن.
زۆر باشە!
Aww بەڵێ، تۆ بە سەرکەوتوویی ئەم پەیامە ئاگادارکردنەوە گرنگە خوێندەوە. ئەم دەقە نموونەییە کەمێک درێژتر کاردەکات بۆ ئەوەی بزانیت چۆن دووری لەناو ئاگادارکردنەوەیەکدا لەگەڵ ئەم جۆرە ناوەڕۆکەدا کاردەکات.
هەرکاتێک پێویستت پێی بوو، دڵنیابە کە سوودمەندییەکانی پەراوێز بەکاربهێنە بۆ ئەوەی شتەکان بە جوانی و ڕێک و پێک بمێننەوە.
<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 و Bootstrap Icons بەکاربهێنیت بۆ دروستکردنی ئاگادارکردنەوە بە ئایکۆنەکان. بەپێی ئایکۆن و ناوەڕۆکەکەت، لەوانەیە بتەوێت سوودمەندی زیاتر یان ستایلە تایبەتمەندەکان زیاد بکەیت.
<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 بەکاربهێنیت و سپرایتی 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>
دەرکردن
بە بەکارهێنانی پێوەکراوەکەی جاڤاسکڕێپتی ئاگادارکردنەوە، دەتوانرێت هەر ئاگادارکردنەوەیەک لەناو هێڵدا ڕەت بکرێتەوە. لێرەدا چۆنیەتی:
- دڵنیابە کە پێوەکراوەکەی ئاگادارکردنەوەت بارکردووە، یان جاڤاسکڕێپتی Bootstrap ی کۆکراوە.
- دوگمەی داخستنی زیاد بکە و
.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"
بۆ توخمەکە.
ساس
گۆڕاوەکان
$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);
}
}
هەڵسوکەوتی جاڤاسکڕێپت
دەستپێکردن
توخمەکان وەک ئاگادارکردنەوە دەستپێبکە
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
بۆ تاکە مەبەستی ڕەتکردنەوەی ئاگادارکردنەوەیەک، پێویست ناکات پێکهاتەکە بە دەست لە ڕێگەی JS API دەستپێبکرێت. بە بەکارهێنانی data-bs-dismiss="alert"
, پێکهاتەکە بە شێوەیەکی ئۆتۆماتیکی دەستپێدەکات و بە شێوەیەکی دروست ڕەتدەکرێتەوە.
بۆ زانیاری زیاتر سەیری بەشی triggers بکە.
دەستپێکەرەکان
دەتوانرێت دەرکردن بە 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 لا دەبات.
شێوازەکان
ڕێگا | وەسف |
---|---|
close |
ئاگادارکردنەوەیەک دادەخات بە لابردنی لە DOM. ئەگەر پۆلەکانی .fade و .show لەسەر توخمەکە ئامادە بن، ئاگادارکردنەوەکە پێش لابردنی کاڵ دەبێتەوە. |
dispose |
ئاگاداری توخمێک لەناو دەبات. (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات) |
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 |
کاتێک ئاگادارکردنەوەکە داخراوە و گواستنەوەکانی CSS تەواو بوون، کاردەکاتە دەرەوە. |
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()
})