دورة بوتستراب 3 – الدرس السابع bootstrap alerts

السلام عليكم و رحمة الله و بركاته .

مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل التنبيـهات أو التحذيرات بإستخدام البوتستراب .

تسمح البوتستراب بإنشاء مجموعة من رسائل  تنبيه و تحذير المستخدمين و بطريقة سهلة جدا و ذلك بإستعمال صنف 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">&times;</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">&times;</a>
. رسالة تنبيه تستعمل لتأشير على نجاح عملية ما
</div>

• مثال على كيفية إستخدام الـ  fade in :

هذا كل ما يتعلق بالبوتستراب alert نرجو من الله أنكم  إستفدتم  من هذا الدرس .

شكرا جزيلا .

المصـادر : المصدر 1 , المصدر 2 .

دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells