رنګ او پس منظر

د متضاد مخکینۍ رنګ سره د شالید رنګ تنظیم کړئ.

په دې پاڼه کې

کتنه

په v5.2.0 کې اضافه شوی

رنګ او شالید مرسته کونکي په یوه ټولګي کې زموږ د .text-*اسانتیاو او .bg-*اسانتیاوو ځواک سره یوځای کوي. زموږ د Sass color-contrast()فنکشن په کارولو سره، موږ په اتوماتيک ډول colorد یو ځانګړي لپاره متضاد ټاکو background-color.

پورته شه! اوس مهال د CSS اصلي color-contrastفعالیت لپاره هیڅ ملاتړ شتون نلري، نو موږ خپل د 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>