نظام الألوان في Bootstrap

<!-- ألوان الموضوع الأساسية --> <div class="bg-primary text-white p-3">Primary</div> <div class="bg-secondary text-white p-3">Secondary</div> <div class="bg-success text-white p-3">Success</div> <div class="bg-danger text-white p-3">Danger</div> <div class="bg-warning text-dark p-3">Warning</div> <div class="bg-info text-dark p-3">Info</div> <div class="bg-light text-dark p-3">Light</div> <div class="bg-dark text-white p-3">Dark</div>

<p class="text-primary">هذا النص بلون primary</p> <p class="text-secondary">هذا النص بلون secondary</p> <p class="text-success">هذا النص بلون success</p> <p class="text-danger">هذا النص بلون danger</p> <p class="text-warning">هذا النص بلون warning</p> <p class="text-info">هذا النص بلون info</p> <p class="text-light bg-dark">هذا النص بلون light</p> <p class="text-dark">هذا النص بلون dark</p> <!-- ألوان نص إضافية --> <p class="text-body">لون النص الافتراضي</p> <p class="text-muted">لون النص الخافت</p> <p class="text-white bg-dark">لون النص الأبيض</p> <p class="text-black-50">أسود بشفافية 50%</p> <p class="text-white-50 bg-dark">أبيض بشفافية 50%</p>

<!-- ألوان خلفية صلبة --> <div class="bg-primary text-white p-3 mb-2">خلفية Primary</div> <div class="bg-success text-white p-3 mb-2">خلفية Success</div> <div class="bg-warning text-dark p-3 mb-2">خلفية Warning</div> <div class="bg-danger text-white p-3 mb-2">خلفية Danger</div> <!-- خلفيات فاتحة --> <div class="bg-light p-3 mb-2">خلفية فاتحة</div> <div class="bg-white p-3 mb-2 border">خلفية بيضاء</div> <div class="bg-transparent p-3 mb-2 border">خلفية شفافة</div>

<!-- لون خلفية مع شفافية --> <div class="bg-primary bg-opacity-100 p-3 mb-2">شفافية 100%</div> <div class="bg-primary bg-opacity-75 p-3 mb-2">شفافية 75%</div> <div class="bg-primary bg-opacity-50 p-3 mb-2">شفافية 50%</div> <div class="bg-primary bg-opacity-25 p-3 mb-2">شفافية 25%</div> <div class="bg-primary bg-opacity-10 p-3 mb-2">شفافية 10%</div> <!-- لون نص مع شفافية --> <p class="text-primary text-opacity-100">شفافية 100%</p> <p class="text-primary text-opacity-75">شفافية 75%</p> <p class="text-primary text-opacity-50">شفافية 50%</p> <p class="text-primary text-opacity-25">شفافية 25%</p>

<div class="bg-primary bg-gradient text-white p-3 mb-2"> خلفية متدرجة Primary </div> <div class="bg-success bg-gradient text-white p-3 mb-2"> خلفية متدرجة Success </div> <div class="bg-danger bg-gradient text-white p-3 mb-2"> خلفية متدرجة Danger </div> <div class="bg-dark bg-gradient text-white p-3 mb-2"> خلفية متدرجة Dark </div>

<!-- مجموعات بنمط التنبيهات --> <div class="bg-success bg-opacity-10 border border-success text-success p-3 mb-2"> <strong>نجاح:</strong> تمت العملية بنجاح! </div> <div class="bg-warning bg-opacity-10 border border-warning text-warning p-3 mb-2"> <strong>تحذير:</strong> يرجى مراجعة التغييرات الخاصة بك. </div> <div class="bg-danger bg-opacity-10 border border-danger text-danger p-3 mb-2"> <strong>خطأ:</strong> حدث خطأ ما! </div> <div class="bg-info bg-opacity-10 border border-info text-info p-3 mb-2"> <strong>معلومة:</strong> إليك بعض المعلومات المفيدة. </div>

<a href="#" class="link-primary">رابط Primary</a> <a href="#" class="link-secondary">رابط Secondary</a> <a href="#" class="link-success">رابط Success</a> <a href="#" class="link-danger">رابط Danger</a> <a href="#" class="link-warning">رابط Warning</a> <a href="#" class="link-info">رابط Info</a> <a href="#" class="link-light">رابط Light</a> <a href="#" class="link-dark">رابط Dark</a>

<!-- الخلفيات الداكنة تحتاج نص فاتح --> <div class="bg-primary text-white p-3">Primary مع نص أبيض</div> <div class="bg-dark text-white p-3">Dark مع نص أبيض</div> <div class="bg-success text-white p-3">Success مع نص أبيض</div> <!-- الخلفيات الفاتحة تحتاج نص داكن --> <div class="bg-light text-dark p-3">Light مع نص داكن</div> <div class="bg-warning text-dark p-3">Warning مع نص داكن</div> <div class="bg-info text-dark p-3">Info مع نص داكن</div>

<div class="container"> <div class="row g-3"> <div class="col-md-6"> <div class="border border-success border-2 rounded p-4"> <h5 class="text-success">خادم نشط</h5> <p class="text-muted mb-0">جميع الأنظمة تعمل</p> <span class="badge bg-success bg-opacity-25 text-success mt-2"> متصل </span> </div> </div> <div class="col-md-6"> <div class="border border-warning border-2 rounded p-4"> <h5 class="text-warning">وضع الصيانة</h5> <p class="text-muted mb-0">صيانة مجدولة قيد التقدم</p> <span class="badge bg-warning bg-opacity-25 text-warning mt-2"> قيد التنفيذ </span> </div> </div> <div class="col-md-6"> <div class="border border-danger border-2 rounded p-4"> <h5 class="text-danger">الخدمة متوقفة</h5> <p class="text-muted mb-0">فشل الاتصال</p> <span class="badge bg-danger bg-opacity-25 text-danger mt-2"> غير متصل </span> </div> </div> <div class="col-md-6"> <div class="border border-info border-2 rounded p-4"> <h5 class="text-info">تحديث متاح</h5> <p class="text-muted mb-0">نسخة جديدة جاهزة للتثبيت</p> <span class="badge bg-info bg-opacity-25 text-info mt-2"> إجراء مطلوب </span> </div> </div> </div> </div>