Source

رنګونه

د یو څو رنګ یوټیلټي ټولګیو سره د رنګ له لارې معنی وړاندې کړئ. د هور ایالتونو سره د سټایل کولو لینکونو ملاتړ هم شامل دی.

رنګ

متن - لومړني

متن-ثانوي

متن - بریالیتوب

متن - خطر

متن - خبرداری

.text-info

متن رڼا

متن - تیاره

متن خاموش شوی

متن - سپین

<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-*اسانتیاو څخه کار واخلئ.

.bg-لومړنی
.bg-ثانوي
.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>

د شاليد تدريجي

کله $enable-gradientsچې ریښتیا ټاکل کیږي، تاسو به د دې وړتیا ولرئ چې د .bg-gradient-کارونې ټولګي وکاروئ. په ډیفالټ ، $enable-gradientsغیر فعال دی او لاندې مثال په قصدي ډول مات شوی. دا د هغه شیبې څخه چې تاسو د بوټسټریپ کارول پیل کړئ د اسانه تنظیم کولو لپاره ترسره کیږي. د دې ټولګیو او نورو فعالولو لپاره زموږ د Sass اختیارونو په اړه زده کړه وکړئ .

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-buccess
.bg-gradient-خطر
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
<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ټولګي سره پټ اضافي متن.