تنبيهات
قم بتوفير رسائل ملاحظات سياقية لإجراءات المستخدم النموذجية مع عدد قليل من رسائل التنبيه المتاحة والمرنة.
أمثلة
تتوفر التنبيهات لأي طول نص ، بالإضافة إلى زر إغلاق اختياري. للحصول على تصميم مناسب ، استخدم واحدة من الفئات السياقية الثمانية المطلوبة.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 المساعدة وأيقونات Bootstrap لإنشاء تنبيهات بالأيقونات. بناءً على الرموز والمحتوى الخاصين بك ، قد ترغب في إضافة المزيد من الأدوات المساعدة أو الأنماط المخصصة.
<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>
رفض
باستخدام مكون JavaScript الإضافي للتنبيه ، من الممكن استبعاد أي تنبيه مضمن. إليك الطريقة:
- تأكد من تحميل البرنامج المساعد للتنبيه ، أو Bootstrap 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
محفزات
تفعيل رفض تنبيه عبر 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>
لاحظ أن إغلاق التنبيه سيزيله من DOM.
طُرق
يمكنك إنشاء مثيل تنبيه باستخدام مُنشئ التنبيه ، على سبيل المثال:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
هذا يجعل التنبيه يستمع إلى أحداث النقر على العناصر الفرعية التي لها data-bs-dismiss="alert"
السمة. (ليس ضروريًا عند استخدام التهيئة التلقائية لـ data-api.)
طريقة | وصف |
---|---|
close |
يغلق تنبيهًا بإزالته من DOM. في حالة وجود الفئات .fade و .show على العنصر ، سيتلاشى التنبيه قبل إزالته. |
dispose |
يدمر تنبيه عنصر. (يزيل البيانات المخزنة على عنصر DOM) |
getInstance |
الأسلوب الثابت الذي يسمح لك بالحصول على مثيل التنبيه المرتبط بعنصر DOM ، يمكنك استخدامه على النحو التالي:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
طريقة Static تُرجع مثيل تنبيه مرتبط بعنصر DOM أو تنشئ مثيلًا جديدًا في حالة عدم تهيئتها. يمكنك استخدامه على النحو التالي:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
الأحداث
يكشف المكون الإضافي للتنبيه في Bootstrap عن بعض الأحداث للتثبيت في وظائف التنبيه.
حدث | وصف |
---|---|
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()
})