ቀለም እና ዳራ

ከተቃራኒ የፊት ቀለም ጋር የጀርባ ቀለም ያዘጋጁ።

በዚህ ገጽ ላይ

አጠቃላይ እይታ

በ v5.2.0 ውስጥ ተጨምሯል

የቀለም እና የጀርባ ረዳቶች የእኛን .text-*መገልገያዎች እና .bg-*መገልገያዎች ኃይል በአንድ ክፍል ያጣምራሉ. የSass ተግባራችንን በመጠቀም ለተወሰነ color-contrast()ንፅፅር በራስ-ሰር እንወስናለን ።colorbackground-color

ቀና በል! በአሁኑ ጊዜ ለCSS-ተወላጅ color-contrastተግባር ምንም ድጋፍ የለም፣ስለዚህ የራሳችንን በ Sass እንጠቀማለን። ይህ ማለት የገጽታ ቀለሞቻችንን በሲኤስኤስ ተለዋዋጮች ማበጀት በእነዚህ መገልገያዎች ላይ የቀለም ንፅፅር ችግሮችን ሊያስከትል ይችላል።

ቀዳሚ ከንፅፅር ቀለም ጋር

ሁለተኛ ደረጃ በተቃራኒ ቀለም

ከተቃራኒ ቀለም ጋር ስኬት

ከተቃራኒ ቀለም ጋር አደጋ

በተቃራኒ ቀለም ማስጠንቀቂያ

ተቃራኒ ቀለም ያለው መረጃ

ብርሃን ከተቃራኒ ቀለም ጋር

ከተቃራኒ ቀለም ጋር ጨለማ

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

ክፍሎች ጋር

እንደ ባጅ.text-* ላይ ባሉ ጥምር እና .bg-*ክፍሎች ምትክ ይጠቀሙባቸው ፡-

ዋና መረጃ

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

ወይም በካርዶች ላይ ;

ራስጌ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>