ቀለሞች

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

ቀለም

.ጽሑፍ-ዋና

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

.ጽሑፍ - ስኬት

.ጽሑፍ-አደጋ

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

.የፅሁፍ መረጃ

.ጽሑፍ-ብርሃን

.ጽሑፍ-ጨለማ

.ጽሑፍ-አካል

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

.ጽሑፍ-ነጭ

.ጽሑፍ-ጥቁር-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መጠቀም ትችላለህ ። በነባሪ፣ ተሰናክሏል እና ከታች ያለው ምሳሌ ሆን ተብሎ የተሰበረ ነው። ይህ የሚደረገው Bootstrapን መጠቀም ከጀመሩበት ጊዜ ጀምሮ ለቀላል ማበጀት ነው። እነዚህን ክፍሎች ለማንቃት እና ሌሎችም ስለ Sass አማራጮቻችን ይወቁ ።.bg-gradient-$enable-gradients

.bg-gradient-primary

.ቢግ-ግራዲየንት-ሁለተኛ ደረጃ

.ቢግ-ግራዲየንት-ስኬት

.ቢግ-ግራዲየንት-አደጋ

.ቢግ-ግራዲየንት-ማስጠንቀቂያ

.bg-gradient-መረጃ

.ቢግ-ግራዲየንት-ብርሃን

.ቢግ-ግራዲየንት-ጨለማ

<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ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።