المساعد المدمج text-bg | الألوان والخلفيات في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الإصدارات السابقة كان المطور يضطر لكتابة كلاسين منفصلين للخلفية والنص مثل .bg-warning .text-dark ثم يتذكر تغيير النص إلى .text-white مع .bg-primary؛ ونسيان لون النص كان ينتج نصوصاً بيضاء غير مقروءة فوق خلفية صفراء فاتحة!

أنهى بوتستراب 5.2+ هذا الخطأ الشائع بإطلاق المساعدات المدمجة .text-bg-primary حتى .text-bg-dark؛ فبمجرد كتابة كلاس واحد يضبط الإطار لون الخلفية ويقترن تلقائياً بلون نص أمامي يحقق نسبة التباين القياسية المضمونة.

الصف 2 كود برمجي

HTML

<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>

جرّب بنفسك

الصف 3 ملاحظة هامة

Combined text-bg Helpers المساعد المدمج text-bg

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الألوان والخلفيات في بوتستراب 5)