رنګونه
د یو څو رنګ یوټیلټي ټولګیو سره د رنګ له لارې معنی وړاندې کړئ. د هور ایالتونو سره د سټایل لینکونو لپاره ملاتړ هم شامل دی.
متن - لومړني
متن-ثانوي
متن - بریالیتوب
متن - خطر
متن - خبرداری
.text-info
متن رڼا
متن - تیاره
.text-body
متن خاموش شوی
متن - سپین
.text-black-50
.text-white-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-*اسانتیاو څخه کار واخلئ.
<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چې ریښتیا ټاکل کیږي، تاسو به د دې وړتیا ولرئ چې د .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ټولګي سره پټ اضافي متن.