في هذا الدرس 7تصفّح المواضيع
بدلاً من نثر رموز الألوان السداسية العشوائية في أرجاء المشروع، يبني بوتستراب 5.3 هويته اللونية على ثمانية أسماء دلالية تعبر عن «وظيفة الرسالة» لا مجرد اسم اللون: primary للهوية والإجراء الرئيسي، وsecondary للعناصر المساندة، وsuccess لإتمام العمليات بنجاح، وdanger للأخطاء الحرجة، وwarning للتنبيهات التحذيرية، وinfo للمعلومات الإرشادية، إلى جانب light وdark.
تكمن قوة هذه التسمية الدلالية في توحيد لغة الفريق؛ فعندما تقرر الشركة لاحقاً تغيير لون علامتها الرئيسي من الأزرق إلى البنفسجي، يكفي تحديث قيمة primary في مكان واحد لتتحدث جميع النصوص والخلفيات المتصلة بها تلقائياً.
لتلوين النصوص مباشرة، استخدم كلاسات .text-primary حتى .text-dark. وفي الإصدار 5.3 أضيفت عائلة درجات التركيز العميقة .text-primary-emphasis و.text-success-emphasis وأخواتها لتوفر نصاً داكناً عالي التباين يظهر بوضوح فائق فوق الخلفيات الفاتحة والناعمة.
كما استُبدل الكلاس القديم .text-muted بمنظومة نصوص سطح تكيفية أكثر دقة تبدأ من .text-body للنص الأساسي، ثم .text-body-secondary للعناوين الفرعية والأوصاف الهادئة، و.text-body-tertiary للنصوص التكميلية الخافتة.
<p class="text-primary">Primary brand status</p>
<p class="text-success-emphasis">Success emphasis</p>
<p class="text-danger">Critical alert text</p>
<p class="text-body-secondary">Secondary timestamp</p>بدلاً من إنشاء كلاسات ألوان رمادية متعددة لكل درجة خفوت، يتيح لك بوتستراب 5 دمج أي كلاس لون نصي مع كلاسات الشفافية القياسية الثلاثة: .text-opacity-75 و.text-opacity-50 و.text-opacity-25 (إلى جانب .text-opacity-100 لإعادة الحدة الكاملة).
تعمل هذه الكلاسات بتعديل قيمة المتغير المحلي --bs-text-opacity على العنصر نفسه، لذا احرص على اقترانها بكلاس لون نصي يعتمد على قنوات RGB مثل .text-primary أو .text-dark.
في تصميم الواجهات الحديثة نادراً ما نملأ مساحات واسعة بألوان صاخبة بالكامل؛ بل نميل إلى الأسطح الهادئة المريحة للعين. لذلك يوفر بوتستراب 5.3 طبقتين متكاملتين للخلفيات:
- الخلفيات الصريحة (
.bg-primary...bg-dark): ألوان مشبعة قوية تناسب الشارات والأشرطة البارزة. - الخلفيات الناعمة (
.bg-primary-subtle...bg-danger-subtle): درجات باستيل خفيفة تتكامل بصرياً مع نصوص.text-*-emphasisلبناء صناديق حالة أنيقة، بجانب أسطح الصفحة المحايدة.bg-body-secondaryو.bg-body-tertiary.
<div class="row gy-2">
<div class="col-12 rounded
bg-success-subtle text-success-emphasis">
Deployment completed cleanly.
</div>
<div class="col-12 rounded
bg-warning-subtle text-warning-emphasis">
Maintenance starts in 15m.
</div>
</div>لإضفاء عمق بصري ناعم على الخلفية الملونة، أضف كلاس .bg-gradient إلى جانب أي كلاس .bg-* فيرسم المتصفح طبقة تدرج خطي شبه شفافة تمتد من إضاءة خفيفة بنسبة 15% في الأعلى إلى لون الخلفية الأصلي في الأسفل.
ويمكنك التحكم في شفافية الخلفية نفسها دون التأثير على شفافية النص بداخلها عبر الكلاسات الأربع: .bg-opacity-75 و.bg-opacity-50 و.bg-opacity-25 و.bg-opacity-10.
في الإصدارات السابقة كان المطور يضطر لكتابة كلاسين منفصلين للخلفية والنص مثل .bg-warning .text-dark ثم يتذكر تغيير النص إلى .text-white مع .bg-primary؛ ونسيان لون النص كان ينتج نصوصاً بيضاء غير مقروءة فوق خلفية صفراء فاتحة!
أنهى بوتستراب 5.2+ هذا الخطأ الشائع بإطلاق المساعدات المدمجة .text-bg-primary حتى .text-bg-dark؛ فبمجرد كتابة كلاس واحد يضبط الإطار لون الخلفية ويقترن تلقائياً بلون نص أمامي يحقق نسبة التباين القياسية المضمونة.
<div class="row g-2">
<div class="col-6">
<div class="text-bg-primary rounded">Primary</div>
</div>
<div class="col-6">
<div class="text-bg-warning rounded">Warning</div>
</div>
</div>تفرض إرشادات إمكانية الوصول العالمية قاعدتين ذهبيتين عند توظيف الألوان في واجهات الويب: أولاً ألا يقل تباين النص العادي مع خلفيته عن نسبة 4.5:1 (و3:1 للنصوص الكبيرة)، وثانياً عدم الاعتماد على اللون وحده كوسيلة وحيدة لنقل المعلومة حتى لا تضيع الدلالة لدى المصابين بعمى الألوان؛ بل اقرن اللون دائماً بنص صريح أو أيقونة دالة:
| فئة الكلاس | أمثلة قياسية | الوظيفة المعمارية |
|---|---|---|
| ألوان النص الصريحة | .text-primary, .text-danger | تلوين النص عبر متغيرات RGB الدلالية |
| درجات التركيز والتكيف | .text-*-emphasis, .text-body-secondary | تباين نصي عميق وبديل حديث لكلاس text-muted |
| شفافية النص | .text-opacity-75, .text-opacity-50 | تخفيف حدة لون النص دون تغيير المتغير الأساسي |
| الخلفيات الصريحة والناعمة | .bg-success, .bg-success-subtle | أسطح مشبعة قوية أو خلفيات باستيل هادئة |
| التدرج وشفافية الخلفية | .bg-gradient, .bg-opacity-25 | إضاءة خطية علوية أو تخفيف شفافية السطح وحده |
| المساعد المدمج للتباين | .text-bg-primary, .text-bg-warning | تعيين الخلفية مع لون نص مقروء مضمون التباين |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس لوحة الألوان الدلالية الثمانية في بوتستراب 5.3، وتلوين النصوص ودرجات التركيز العميقة، وضبط شفافية النص والخلفية عبر قنوات RGB، وتوظيف الخلفيات الناعمة والمساعد الذكي text-bg بمعايير تباين WCAG.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «أدوات التباعد والهوامش في بوتستراب 5» لإتقان مقياس الهوامش والحشو من 0 إلى 5 والكلاسات المنطقية الداعمة للعربية وفواصل التخطيط.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Semantic Color Palette لوحة الألوان الدلالية
- الأدوار اللونية الثمانية القياسية في بوتستراب التي تعبر عن المعنى الوظيفي للعنصر بدلاً من اسم اللون المجرد.
- للمراجعة
- 02 Subtle Background الخلفية الناعمة التكيفية
- كلاسات .bg-*-subtle الحديثة التي تمنح العنصر خلفية هادئة عالية المقروئية تتكامل مع نصوص التركيز.
- للمراجعة
- 03 Combined text-bg Helper المساعد المدمج للخلفية والنص
- كلاس مدمج يضبط لون الخلفية ويختار معه تلقائياً لون نص أبيض أو داكن يحقق أعلى تباين بصري.
- للمراجعة
- 04 Secondary Body Text النص الثانوي التكيفي
- كلاس .text-body-secondary الحديث في الإصدار 5.3 لتنسيق النصوص الفرعية والوصفية كبديل متكيف لكلاس text-muted.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 WCAG WCAG
- Web Content Accessibility Guidelines
- المعيار العالمي لإمكانية الوصول الذي يشترط تباين 4.5:1 للنصوص العادية وعدم الاكتفاء باللون وحده.
- للمراجعة
- 02 RGB RGB
- Red Green Blue Color Channels
- تمثيل الألوان بثلاث قنوات رقمية يتيح لبوتستراب تعديل شفافية النص أو الخلفية ديناميكياً.
- للمراجعة
- 03 RGBA RGBA
- Red Green Blue Alpha
- دالة اللون في CSS التي تدمج قنوات اللون الثلاث مع نسبة الشفافية لعزل شفافية الخلفية عن النص.
- للمراجعة
- 04 UI UI
- User Interface
- الواجهة المرئية التي تساعد ألوانها الدلالية الموحدة المستخدم على تمييز حالات النجاح والتحذير فوراً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ عنصرين متتاليين داخل شبكة .row .gy-2: الأول يدمج bg-success-subtle مع text-success-emphasis، والثاني يدمج bg-danger-subtle مع text-danger-emphasis.
-
اعرض عمودين متجاورين .col-6 يحمل الأول كلاس text-bg-primary والثاني كلاس text-bg-warning مع rounded لملاحظة التبديل التلقائي للون النص.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي كلاس مساعد في بوتستراب 5 يضبط خلفية التحذير الصفراء مع لون نص داكن مقروء تلقائياً؟
يضبط .text-bg-warning لون الخلفية التحذيرية ويختار معه لون النص الداكن الأعلى تبايناً تلقائياً.
ما الكلاس الحديث في بوتستراب 5.3 الذي حل محل .text-muted لتنسيق الأوصاف الثانوية المتكيفة؟
يقدم .text-body-secondary لون نص ثانوي يتكيف تلقائياً مع أوضاع الألوان كبديل حديث لكلاس text-muted.
هل يؤدي تطبيق .bg-opacity-25 مع .bg-primary إلى جعل النص المكتوب بداخل العنصر شفافاً بنسبة 25% أيضاً؟
خطأ؛ يعدل .bg-opacity-* قناة ألفا للون الخلفية فقط عبر متغيرات RGB ويبقى النص الداخلي واضحاً بنسبة 100%.
ما كلاس لون النص الأنسب للاقتران مع الخلفية الناعمة .bg-primary-subtle لتحقيق أعلى وضوح؟
صُممت كلاسات .text-*-emphasis خصيصاً لتوفير تباين عميق مقروء فوق خلفيات .bg-*-subtle الناعمة.
ما التأثير البصري الناتج عن إضافة كلاس .bg-gradient بجانب أحد كلاسات الخلفية .bg-*؟
يضيف طبقة تدرج خطي ناعم يبدأ بإضاءة بيضاء خفيفة بنسبة 15% في الأعلى نحو لون الخلفية الأساسي.
ما الحد الأدنى القياسي لنسبة التباين في معيار WCAG AA للنصوص العادية مع خلفيتها؟
يشترط معيار WCAG AA نسبة تباين لا تقل عن 4.5:1 للنصوص العادية لضمان وضوح القراءة.
هل يكفي تغيير لون النص إلى الأحمر وحده دون عبارة توضيحية أو أيقونة لإيصال حالة الخطأ لجميع المستخدمين؟
خطأ؛ لا يجوز الاعتماد على اللون وحده لإيصال المعلومة مراعاةً للمصابين بعمى الألوان ومستخدمي قارئات الشاشة.
أي درجة من الدرجات التالية متوفرة رسمياً ضمن كلاسات شفافية الخلفية .bg-opacity-* في بوتستراب 5؟
يوفر بوتستراب 5 درجات الشفافية 75 و50 و25 و10 للخلفيات عبر .bg-opacity-*.