Source

رنگ

رنگن جي ذريعي معنيٰ ڏيو رنگن جي استعمال جي ڪلاسن سان. هور رياستن سان اسٽائلنگ لنڪس لاءِ سپورٽ پڻ شامل آهي.

رنگ

متن- پرائمري

متن-ثانوي

.text-ڪاميابي

.text-خطرو

متن جي خبرداري

متن جي ڄاڻ

.text-light

متن- اونداهو

.text-body

متن-خاموش

متن-اڇو

متن-ڪارو-50

متن-اڇو-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

لاڳاپيل متن جا ڪلاس پڻ اينڪرز تي مهيا ڪيل هور ۽ فوڪس رياستن سان گڏ ڪم ڪن ٿا. نوٽ ڪريو ته .text-white۽ .text-mutedڪلاس ۾ انڊر لائن کان وڌيڪ ڪابه اضافي لنڪ اسٽائل ناهي.

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

پس منظر رنگ

لاڳاپيل متن جي رنگن جي طبقن وانگر، آساني سان ڪنهن عنصر جي پس منظر کي ڪنهن به لاڳاپيل طبقي سان ترتيب ڏيو. لنگر جا حصا هور تي اونداهي ٿيندا، بس ٽيڪسٽ ڪلاس وانگر. پس منظر افاديت سيٽ نه ڪندا آھنcolor ، تنھنڪري ڪجھ ڪيسن ۾ توھان استعمال ڪرڻ چاھيو ٿا .text-*افاديت.

.bg-پرائمري
.bg-ثانوي
.bg-ڪاميابي
.bg-خطرو
بي جي ڊيڄاريندڙ
بي جي ڄاڻ
بي جي روشني
.bg-ڳاڙهو
.bg-اڇو
.bg- شفاف
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

پس منظر گريجوئيٽ

جڏهن $enable-gradientsمقرر ڪيو ويو آهي true(ڊفالٽ آهي false)، توهان استعمال ڪري سگهو ٿا .bg-gradient-يوٽيليٽي ڪلاس. اسان جي باري ۾ سکو Sass اختيارن کي فعال ڪرڻ لاء انهن طبقن ۽ وڌيڪ.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

خاصيت سان معاملو ڪرڻ

ڪڏهن ڪڏهن لاڳاپيل طبقن کي لاڳو نٿو ڪري سگهجي ڇاڪاڻ ته ڪنهن ٻئي چونڊيندڙ جي خاصيت جي ڪري. <div>ڪجهه حالتن ۾، هڪ ڪافي حل آهي توهان جي عنصر جي مواد کي ڪلاس سان گڏ لفافي ڪرڻ لاء .

مددگار ٽيڪنالاجي جي معني کي پهچائڻ

معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .sr-onlyڪلاس سان لڪايو ويو آهي.