ቀለሞች
በጥቂት የቀለም መገልገያ ክፍሎች አማካኝነት ትርጉምን በቀለም ያስተላልፉ። አገናኞችን ከማንዣበብ ግዛቶች ጋር ለመስራት ድጋፍን ያካትታል።
ከልዩነት ጋር መስተጋብር
አንዳንድ ጊዜ የአውድ ክፍሎች በሌላ መራጭ ልዩነት ምክንያት ሊተገበሩ አይችሉም። በአንዳንድ ሁኔታዎች፣ በቂ መፍትሄ የአንተን ንጥረ ነገር ይዘት <div>
ከክፍል ጋር መጠቅለል ነው።
ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት
ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-only
ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።
ቀለም
.ጽሑፍ-ዋና
.ጽሑፍ-ሁለተኛ ደረጃ
.ጽሑፍ - ስኬት
.ጽሑፍ-አደጋ
.የፅሁፍ ማስጠንቀቂያ
.የፅሁፍ መረጃ
.ጽሑፍ-ብርሃን
.ጽሑፍ-ጨለማ
.ጽሑፍ-አካል
.ጽሑፍ ድምጸ-ከል ተደርጓል
.ጽሑፍ-ነጭ
.ጽሑፍ-ጥቁር-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-*
።
<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
ሲዋቀር ፣ የመገልገያ ክፍሎችን መጠቀም ይችላሉ ። እነዚህን ክፍሎች ለማንቃት እና ሌሎችም ስለ Sass አማራጮቻችን ይወቁ ።true
false
.bg-gradient-
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark