الألوان في إطار العمل Bootstrap

من موسوعة حسوب
اذهب إلى: تصفح، ابحث

استخدم الألوان لتوصيل رسائلك باستخدام أصناف الألوان الخدميّة التي يوفّرها إطار العمل Bootstrap. تتضمّن أدوات الألوان في Bootstrap دعم تنسيق الروابط في حالة الحومان (hover).

الألوان

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
تعمل أصناف سياق النصّ (‎.text-*‎) السابقة كذلك على الروابط وتوفّر تنسيقات لحالة الحومان وتركيز المؤشّر. تُرجَى ملاحظة أنّ الصنفيْن ‎.text-white و‎.text-muted لا يوفّران أنماط تنسيق للروابط.
<p><a href="#" class="text-primary">رابط أوّليّ</a></p>
<p><a href="#" class="text-secondary">رابط ثانويّ</a></p>
<p><a href="#" class="text-success">رابط نجاح</a></p>
<p><a href="#" class="text-danger">رابط خطر</a></p>
<p><a href="#" class="text-warning">رابط تحذير</a></p>
<p><a href="#" class="text-info">رابط معلومة</a></p>
<p><a href="#" class="text-light bg-dark">رابط خفيف</a></p>
<p><a href="#" class="text-dark">رابط غامق</a></p>
<p><a href="#" class="text-muted">رابط مكتوم</a></p>
<p><a href="#" class="text-white bg-dark">رابط أبيض</a></p>

ألوان الخلفية

يمكن تعيين ألوان خلفيّات العناصر بسهولة على نحو مماثل لألوان النصّ السابقة. يعتم لون خلفيّة الروابط عند الحومان فوقها، كما يحدُث لألوان النصوص. لا تعيّن أدوات الخلفيّة قيمة الخاصيّة color، لذا قد تحتاج أحيانًا إلى استخدام الأصناف ‎.text-‎*‎.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

التدرّج في ألوان الخلفيّة

يمكن استخدام الأصناف الخدميّة ‎.bg-gradient-‎ إذا أُسنِدت القيمة true إلى المتغيّر ‎$enable-gradients. تُعطَّل تدرّجات الخلفيّة (‎$enable-gradients) مبدئيّا. لن يعمل المثال التالي في الإعدادات المبدئيّة. ضُبِطت الإعدادات بهذه الطريقة لتسهيل تخصيص المظهر من اللحظة التي تبدأ فيها باستخدام إطار العمل Bootstrap. راجع خيّارات Sass لمعرفة كيفيّة تفعيل هذه الأصناف والمزيد من التفاصيل عن تخصيص المظهر في Bootstrap.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

التعامل مع المحدِّدات

قد لا تعمل الأصناف السيّاقيّة المذكورة هنا نظرًا لأنّ محدِّدًا آخر أكثر تحديدًا. قد يكفي أحيانًا تغليف محتوى العنصُر المطلوب تطبيق التنسيقات عليه في عنصُر <div> يُطبَّق عليه الصنف السيّاقي المطلوب.

تنبيه: توصيل المعنى إلى التقنيّات المساعدة

يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف ‎.sr-only.

مصادر