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

عيّن لون الخلفية بلون متباين في المقدمة.

على هذه الصفحة

ملخص

تمت الإضافة في الإصدار 5.2.0

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

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

أساسي مع لون متباين

ثانوي بلون مغاير

النجاح مع تباين الألوان

خطر مع تباين الألوان

تحذير بلون مغاير

معلومات بلون مغاير

ضوء مع لون متباين

داكن مع لون متباين

لغة البرمجة

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

مع المكونات

استخدمها بدلاً من الطبقات المجمعة .text-*والفصول .bg-*الدراسية ، مثل الشارات :

الأولية معلومات

لغة البرمجة

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

أو على البطاقات :

رأس

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

رأس

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

لغة البرمجة

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