السلام عليكم و رحمة الله و بركاته .
مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل التنبيـهات أو التحذيرات بإستخدام البوتستراب .
تسمح البوتستراب بإنشاء مجموعة من رسائل تنبيه و تحذير المستخدمين و بطريقة سهلة جدا و ذلك بإستعمال صنف CSS الخاص بالبوتستراب و هو الـ alert .
نقوم بإنشاء التنبيه أو التحذير بإضافة صنف الـ alert إلى وسم الـ <div> كصنف أساسي ( أب ) , متبوعة بأصناف الثانوية التالية : alert-success , alert-info , alert-warning , alert-danger .
حيث يعبر كل صنف عن لون و نوع التنبيه أو التحذير .
- الكود التالي يشرح كيفية إستعمال كل صنف :
<div class="alert alert-success text-right"> رسالة تنبيه تستعمل لتأشير على نجاح عملية ما . </div> <div class="alert alert-info text-right"> رسالة تنبيه تستعمل لإظهار معلومات مهمة . </div> <div class="alert alert-warning text-right"> رسالة تحذير من شيئ ما . </div> <div class="alert alert-danger text-right"> رسالة تحذير تستعمل لتنبيه عن وجود خطر أو حدوث خطأ ما . </div>
- مثال على كيفية إستخدام الـ alert :
تحتوي البوتستراب أيضا على صنف الـ alert-link و الذي يمكننا من تغيير لون الروابط الموجودة داخل مربع التنبيه أو التحذير بنفس لون التنبيه المستعمل و ذلك بإضافة صنف الـ alert-link إلى وسم الـ <a> , كما هو موضح في الكود التالي :
<div class="alert alert-success text-right"> لمعرفة المزيد <a href="#" class="alert-link"> أنقر على هذا الرابط </a> </div>
- مثال على كيفية إستخدام الـ alert-link :
و يمكن إضافة صنف الـ alert-dismissible لتمكين المستخدم من إغلاق صندوق التنبيه و ذلك بإضافته كصنف ثانوي إلى صنف الـ alert .
الكود التالي يشرح كيفية إستخدامه :
<div class="alert alert-success alert-dismissible text-right"> رسالة تنبيه تستعمل لتأشير على نجاح عملية ما . <a href="#" class="close pull-left" data-dismiss="alert" aria-label="close">×</a> </div>
- مثال على كيفية إستخدام الـ alert-dismissible :
كما يمكن إضافة بعض الـ animation أثناء إغلاق صندوق التنبيه أو التحذير و ذلك بإستخدام صنف الـ fade in أو الـ fade out بهذا الشكل :
<div class="alert alert-success alert-dismissible fade in text-right"> <a href="#" class="close pull-left" data-dismiss="alert" aria-label="close">×</a> . رسالة تنبيه تستعمل لتأشير على نجاح عملية ما </div>
- مثال على كيفية إستخدام الـ fade in :
هذا كل ما يتعلق بالبوتستراب alert نرجو من الله أنكم إستفدتم من هذا الدرس .
شكرا جزيلا .
المصـادر : المصدر 1 , المصدر 2 .
أحدث التعليقات