Bootstrap

Bootstrap Alerts
التحذيرات في Bootstrap

سوف تتعلم في هذا الدرس استخدام الرسايل الملونة مثل التحذيرات ورسايل الخطر ورسايل النجاح في فعل شئ ما بواسطة bootstrap.

التاريخ

02 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

943

المواضيع

6
الشروحات chevron_left Bootstrap Alerts chevron_left 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.