Source

ቀለሞች

በጥቂት የቀለም መገልገያ ክፍሎች አማካኝነት ትርጉምን በቀለም ያስተላልፉ። አገናኞችን ከማንዣበብ ግዛቶች ጋር ለመስራት ድጋፍን ያካትታል።

ቀለም

.ጽሑፍ-ዋና

.ጽሑፍ-ሁለተኛ ደረጃ

.ጽሑፍ - ስኬት

.ጽሑፍ-አደጋ

.የፅሁፍ ማስጠንቀቂያ

.የፅሁፍ መረጃ

.ጽሑፍ-ብርሃን

.ጽሑፍ-ጨለማ

.ጽሑፍ-አካል

.ጽሑፍ ድምጸ-ከል ተደርጓል

.ጽሑፍ-ነጭ

.ጽሑፍ-ጥቁር-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-*

.ቢጂ-ዋና
.ቢጂ-ሁለተኛ ደረጃ
.ቢግ-ስኬት
.ቢጂ-አደጋ
.ቢጂ-ማስጠንቀቂያ
.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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

የበስተጀርባ ቅልመት

ወደ (ነባሪው ) $enable-gradientsሲዋቀር ፣ የመገልገያ ክፍሎችን መጠቀም ይችላሉ ። እነዚህን ክፍሎች ለማንቃት እና ሌሎችም ስለ Sass አማራጮቻችን ይወቁ ።truefalse.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

ከልዩነት ጋር መስተጋብር

አንዳንድ ጊዜ የአውድ ክፍሎች በሌላ መራጭ ልዩነት ምክንያት ሊተገበሩ አይችሉም። በአንዳንድ ሁኔታዎች፣ በቂ መፍትሄ የአንተን ንጥረ ነገር ይዘት <div>ከክፍል ጋር መጠቅለል ነው።

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-onlyከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።