ڕەنگەکان
گەیاندنی مانا لە ڕێگەی ڕەنگەوە بە مشتێک پۆلی سوودمەندی ڕەنگ. پشتگیری بۆ ستایلکردنی بەستەرەکان لەگەڵ دۆخی هۆڤەر لەخۆدەگرێت، هەروەها.
.دەق-سەرەکی
.دەق-لاوەکی
.دەق-سەرکەوتن
.دەق-مەترسی
.ئاگادارکردنەوەی دەق
.زانیاری دەق
.دەق-ڕووناکی
.دەق-تاریک
.دەق-بێدەنگ کراوەتەوە
.دەق-سپی
<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لەسەر true دانراوە، دەتوانیت .bg-gradient-پۆلەکانی سوودبەخش بەکاربهێنیت. بە شێوەیەكی بنەڕەتی، $enable-gradientsلەكاردەخرێت و نموونەی خوارەوە بە ئەنقەست شكاوە. ئەمەش بۆ ئاسانکاری خۆکارکردن لە ساتەوەختەوە کە دەست دەکەیت بە بەکارهێنانی Bootstrap ئەنجام دەدرێت. فێربە دەربارەی بژاردەکانی ساسمان بۆ چالاککردنی ئەم پۆلانە و زۆر شتی تر.
<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>مامەڵەکردن لەگەڵ تایبەتمەندی
هەندێک جار بەهۆی تایبەتمەندی هەڵبژێرەرێکی دیکەوە ناتوانرێت پۆلە کۆنتێکستەکان بەکاربهێنرێت. لە هەندێک حاڵەتدا، چارەسەرێکی بەس ئەوەیە کە ناوەڕۆکی توخمەکەت لە a <div>لەگەڵ پۆلەکەدا بپێچیتەوە.
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان
بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .sr-onlyپۆلەکەدا شاراوەتەوە.