رنگ
رنگن جي ذريعي معنيٰ ڏيو رنگن جي استعمال جي ڪلاسن سان. هور رياستن سان اسٽائلنگ لنڪس لاءِ سپورٽ پڻ شامل آهي.
متن- پرائمري
متن-ثانوي
.text-ڪاميابي
.text-خطرو
متن جي خبرداري
متن جي ڄاڻ
.text-light
متن- اونداهو
متن-خاموش
متن-اڇو
<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</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-*افاديت.
<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>جڏهن $enable-gradientsصحيح تي سيٽ ڪيو ويندو، توهان .bg-gradient-يوٽيليٽي ڪلاس استعمال ڪرڻ جي قابل هوندا. ڊفالٽ طور، $enable-gradientsمعذور آهي ۽ هيٺ ڏنل مثال ڄاڻي واڻي ٽوڙيو ويو آهي. اهو ان وقت کان آسان ڪسٽمائيزيشن لاءِ ڪيو ويو آهي جڏهن توهان بوٽ اسٽريپ استعمال ڪرڻ شروع ڪندا آهيو. اسان جي باري ۾ سکو Sass اختيارن کي فعال ڪرڻ لاء انهن طبقن ۽ وڌيڪ.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>خاصيت سان معاملو ڪرڻ
ڪڏهن ڪڏهن لاڳاپيل طبقن کي لاڳو نٿو ڪري سگهجي ڇاڪاڻ ته ڪنهن ٻئي چونڊيندڙ جي خاصيت جي ڪري. <div>ڪجهه حالتن ۾، هڪ ڪافي حل آهي توهان جي عنصر جي مواد کي ڪلاس سان گڏ لفافي ڪرڻ لاء .
مددگار ٽيڪنالاجي جي معني کي پهچائڻ
معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .sr-onlyڪلاس سان لڪايو ويو آهي.