Bootstrap Alerts
التحذيرات في Bootstrap
سوف تتعلم في هذا الدرس استخدام الرسايل الملونة مثل التحذيرات ورسايل الخطر ورسايل النجاح في فعل شئ ما بواسطة bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Alerts
التحذيرات في BootStrap
</>
Bootstrap Alerts
التحذيرات في bootstrap
- يوفر bootstrap تنسيقات معدة مسبقة للرسائل التحذيرية ورسائل الخطر والنجاح وغيرها.
- لاستخدام اي كلاس خاص بالتحذيرات يجب اولا اضافة كلاس alert الى العنصر حيث يقوم وحده باضافة padding:16px و margin-left:16px.
- يمكن استخدام هذه التنسيقات باضافة كلاس alert وبجانبه كلاس *-alert حيث * هي (primary - secondary - info - success - danger - warning - dark - light) مثل, alert alert-danger.
BootStrap Alerts
استخدام كلاس alert مع الكلاسات السياقية.
<div class="container mt-3">
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
</div>
</>
BootStrap Closing Alerts
اغلاق التحذيرات في bootstrap
التحذيرات هي عناصر غير اساسية في الصفحة, وتظهر فقط عند حدوث action حدث معين داخل الموقع ويجب ان يتم وضع زر لاخفائها.
يوفر bootstrap اماكانية اخفاء التحذيرات على خطوتين:
- اولا: اضافة كلاس alert-dismissible الى العنصر الذي قمت باعطائه كلاس alert.
- ثانيا: انشاء عنصر button او link داخل عنصر التحذير ونقوم باضافة كلاس btn-close و attribute اخر هو "data-bs-dismiss = "alert الى هذا الزر.
Alert Closing
عمل زر لاغلاق التحذير بساتخدام كلاس alert-dismissible.
<div class="alert alert-success alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Light!</strong> Light grey alert. </div>
</>
BootStrap Animated Alerts
التحذيرات المتحركة في bootstrap
لجعل اي alert يبدو افضل يمكن دائما اضافة animation تحريك يجعل التحذير يظهر ويختفي ببطئ قليلا من خلال اضافة كلاس show وكلاس fade الى parent element.
Animated Alerts
عمل animation عند اخفاء alert.
<div class="alert alert-success alert-dismissible fade show"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Success!</strong> This alert box could indicate a successful or positive action. </div>
</>
BootStrap Alert Links
الروابط في تحذيرات bootstrap
كلاس alert-link هو من utility classes الكلاسات المساعدة في bootstrap يتم وضعه داخل اي عنصر link موجود داخل alert لاعطاءه لونا مطابقا لخلفية هذا التحذير.
Alert LInks
مثال على استخدام كلاس alert-link.
<div class="alert alert-primary"> 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"> A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
