ڕەنگ و پاشبنەما

ڕەنگێکی پاشبنەما بە ڕەنگی پێشەوەی کۆنتراست دابنێ.

لەم پەیجەدا

تێڕوانینێکی گشتی

لە v5.2.0 زیاد کراوە

یارمەتیدەرانی ڕەنگ و پاشبنەما هێزی .text-*خزمەتگوزارییەکان و .bg-*خزمەتگوزارییەکانمان لە یەک پۆلدا کۆدەکەنەوە. بە بەکارهێنانی فەنکشنی Sass ـمان color-contrast()، ئێمە بە شێوەیەکی ئۆتۆماتیکی کۆنتراستێک colorبۆ تایبەتێک دیاری دەکەین background-color.

سەرەکان بەرز دەکەنەوە! لە ئێستادا هیچ پشتگیرییەک بۆ color-contrastفەنکشنێکی CSS-native نییە، بۆیە ئێمە لە ڕێگەی Sass ەوە هی خۆمان بەکاردەهێنین. ئەمەش واتە خۆکارکردنی ڕەنگەکانی تەوەرەکانمان لە ڕێگەی گۆڕاوەکانی CSS لەوانەیە ببێتە هۆی کێشەی کۆنتراستی ڕەنگەکان لەگەڵ ئەم سوودمەندییانەدا.

سەرەتایی بە ڕەنگی کۆنتراست

لاوەکی بە ڕەنگی کۆنتراست

سەرکەوتن بە ڕەنگی کۆنتراست

مەترسی بە ڕەنگی کۆنتراست

ئاگادارکردنەوە بە ڕەنگی کۆنتراست

زانیاری بە ڕەنگی کۆنتراست

ڕووناکی بە ڕەنگی کۆنتراست

تاریک بە ڕەنگی کۆنتراست

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>

بە پێکهاتەکانیەوە

لە جیاتی کۆمباین .text-*و .bg-*پۆلەکان بەکاریان بهێنە، وەک لەسەر نیشانەکان :

سەرەکی زانیاری

html

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

یان لەسەر کارتەکان : .

سەردێڕ

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

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>