تمت الإضافة في v5.2 مشاهدة على الـ GitHub

الألوان والخلفية (Color و background)

تعيين لون خلفية مع لون أمامي متباين.

في هذه الصفحة

نظرة عامة

تجمع مساعدات الألوان والخلفية بين قوة أدوات .text-* وأدوات .bg-* في فئة (class) واحدة. باستخدام دالة color-contrast() الخاصة بـ الـ Sass، نقوم تلقائياً بتحديد لون color متباين للون خلفية background-color معين.

تنبيه! لا يوجد حالياً دعم لدالة color-contrast أصلية في CSS، لذا نستخدم الدالة الخاصة بنا عبر الـ Sass. هذا يعني أن تخصيص ألوان السمة الخاصة بنا عبر متغيرات CSS قد يتسبب في حدوث مشكلات في تباين الألوان مع هذه الأدوات.

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

مع المكونات

استخدمها بدلاً من دمج الفئات .text-* و .bg-*، كما هو الحال في الشارات (badges):

Primary Info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

أو على البطاقات (cards):

Header

Some quick example text to build on the card title and make up the bulk of the card’s content.

Header

Some quick example text to build on the card title and make up the bulk of the card’s content.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>