التنبيهات والشارات

<div class="alert alert-primary" role="alert"> تنبيه أساسي بسيط—تحقق منه! </div> <div class="alert alert-secondary" role="alert"> تنبيه ثانوي بسيط—تحقق منه! </div> <div class="alert alert-success" role="alert"> تنبيه نجاح بسيط—تحقق منه! </div> <div class="alert alert-danger" role="alert"> تنبيه خطر بسيط—تحقق منه! </div> <div class="alert alert-warning" role="alert"> تنبيه تحذير بسيط—تحقق منه! </div> <div class="alert alert-info" role="alert"> تنبيه معلومات بسيط—تحقق منه! </div> <div class="alert alert-light" role="alert"> تنبيه فاتح بسيط—تحقق منه! </div> <div class="alert alert-dark" role="alert"> تنبيه داكن بسيط—تحقق منه! </div>

<!-- تنبيه مع رابط --> <div class="alert alert-success" role="alert"> <strong>أحسنت!</strong> لقد قرأت بنجاح رسالة التنبيه المهمة هذه. <a href="#" class="alert-link">اتخذ هذا الإجراء</a> </div> <!-- تنبيه مع أيقونة --> <div class="alert alert-warning d-flex align-items-center" role="alert"> <svg class="bi flex-shrink-0 me-2" width="24" height="24"> <use xlink:href="#exclamation-triangle-fill"/> </svg> <div> تحذير! يرجى التحقق من بيانات الإدخال الخاصة بك. </div> </div> <!-- تنبيه مع عنوان --> <div class="alert alert-info" role="alert"> <h4 class="alert-heading">أحسنت!</h4> <p>لقد أكملت بنجاح عملية التسجيل.</p> <hr> <p class="mb-0">تحقق من بريدك الإلكتروني للتحقق من حسابك.</p> </div>

<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>يا للعجب!</strong> يجب عليك التحقق من بعض هذه الحقول أدناه. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></button> </div> <!-- تنبيه مع التحكم بجافا سكريبت --> <div class="alert alert-success alert-dismissible fade show" role="alert" id="myAlert"> هذا تنبيه قابل للإغلاق! <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></button> </div> <script> // إغلاق التنبيه برمجيًا var alertElement = document.getElementById('myAlert'); var alert = new bootstrap.Alert(alertElement); // alert.close(); // إغلاق التنبيه </script>

<!-- شارات سياقية --> <span class="badge bg-primary">أساسي</span> <span class="badge bg-secondary">ثانوي</span> <span class="badge bg-success">نجاح</span> <span class="badge bg-danger">خطر</span> <span class="badge bg-warning text-dark">تحذير</span> <span class="badge bg-info text-dark">معلومات</span> <span class="badge bg-light text-dark">فاتح</span> <span class="badge bg-dark">داكن</span> <!-- شارة في زر --> <button type="button" class="btn btn-primary"> الإشعارات <span class="badge bg-secondary">4</span> </button> <!-- شارة في عنوان --> <h1>عنوان مثال <span class="badge bg-secondary">جديد</span></h1> <h2>عنوان مثال <span class="badge bg-secondary">جديد</span></h2> <h3>عنوان مثال <span class="badge bg-secondary">جديد</span></h3>

<span class="badge rounded-pill bg-primary">أساسي</span> <span class="badge rounded-pill bg-secondary">ثانوي</span> <span class="badge rounded-pill bg-success">نجاح</span> <span class="badge rounded-pill bg-danger">خطر</span> <span class="badge rounded-pill bg-warning text-dark">تحذير</span> <span class="badge rounded-pill bg-info text-dark">معلومات</span> <!-- شارة حبة مع أيقونة --> <span class="badge rounded-pill bg-success"> <i class="bi bi-check-circle"></i> موثق </span>

<!-- شارة على زر --> <button type="button" class="btn btn-primary position-relative"> صندوق الوارد <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ <span class="visually-hidden">رسائل غير مقروءة</span> </span> </button> <!-- شارة على أيقونة --> <button type="button" class="btn btn-primary position-relative"> <i class="bi bi-bell"></i> <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 5 <span class="visually-hidden">إشعارات</span> </span> </button> <!-- مؤشر نقطة الشارة --> <button type="button" class="btn btn-primary position-relative"> الملف الشخصي <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> <span class="visually-hidden">تنبيهات جديدة</span> </span> </button>

<!-- شارات خلفية صلبة --> <span class="badge bg-primary">أساسي</span> <span class="badge bg-success">نجاح</span> <span class="badge bg-danger">خطر</span> <!-- شارات خلفية خفية --> <span class="badge text-bg-primary">أساسي</span> <span class="badge text-bg-success">نجاح</span> <span class="badge text-bg-danger">خطر</span>