رنگ ۽ پس منظر

متضاد پيش منظر رنگ سان پس منظر جو رنگ مقرر ڪريو.

هن صفحي تي

اوسر

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>