جمعية البرمجيات الحرة وغنو لينكس
  • الرئيسية
  • تصنيفات
    • اخبار
    • العاب
    • برامج
    • مراجعات
    • مقابلات
    • مقالات
    • دروس
      • بوتستراب
    • عتاد
  • النوادي
    • النادي الحر
    • نادي التوطين و التوثيق
    • نادي الانترنت و الحماية
    • نادي الغرافيكس و الالعاب
    • نادي الملتيميديا
    • نادي البرمجة
  • نشاطات الجمعية
  • ليبر بلانت الجزائر
اختر صفحة
لـ aleua mehani | 02/08/2018 | بوتستراب، دروس | 0 تعليقات

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

دورة بوتستراب 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

مقالات ذات صلة

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

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

      السلام عليكم و رحمة الله وبركاته . سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 3 وهي : jumbotron ,... دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells اقرأ المزيد
  • دورة البوتستراب 3 – الدرس الخامس  Bootstrap 3 Images

    دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

      السلام عليكم و رحمة الله و بركاته . سنتطرق في هذا الدرس إن شاء الله إلى مجموعة جديدة من خصائص البوتستراب 3 و التي... دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images اقرأ المزيد
  • دورة بوتستراب 3 – الدرس الرابع  bootstrap 3 tables

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

      السلام عليكم و رحمة الله و بركاته. مرحبا بكم في درس جديد في دورتنا حول البوتستراب 3 و سيكون عن الجداول في البوتستراب... دورة بوتستراب 3 – الدرس الرابع bootstrap 3 tables اقرأ المزيد

أرسل إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

أحدث المقالات

  • مع shellinabox وداعا لبرامج الـ shh
  • اطلاق اوبنتو 19.10 (Eoan Ermin)
  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells
  • دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

أحدث التعليقات

  • hasan mohamed على مع shellinabox وداعا لبرامج الـ shh
  • khammaci hachemi على فيديو: د.رتشارد ستالمان : ماهي البرمجيات الحرة
  • aleua mehani على دورة بوتستـراب 3 – الدرس الأول
  • حياة على دورة بوتستـراب 3 – الدرس الأول
  • Alili Mohamed على البرمجيات المفتوحة المصدر ، مصدر مفتوح لتعدد اللغة كيفما تشاء ..
بتقنية مهارتي | ووردبريس