ሕብሪ & ድሕረ ባይታ

ድሕረ ባይታ ሕብሪ ምስ ተነጻጻሪ ናይ ቅድሚት ሕብሪ ኣቐምጥ።

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

ኣብ v5.2.0 ተወሰኸ

ሕብርን ድሕረ ባይታ ሓገዝቲ ንሓይሊ .text-*ዩቲሊቲታትናን .bg-*ዩቲሊቲታትናን ኣብ ሓደ ክፍሊ የወሃህድዎ። Sass color-contrast()function ናትና ብምጥቃም color፡ ንሓደ ፍሉይ background-color.

ርእሲ ንላዕሊ! ኣብዚ እዋን እዚ ንCSS-native color-contrastfunction ዝኾነ ደገፍ የለን፡ ስለዚ ብመንገዲ Sass ናትና ንጥቀም። እዚ ማለት ብመንገዲ CSS ተለዋወጥቲ ሕብርታት ቴማና ምምዕርራይ ምስዞም ዩቲሊቲታት ናይ ሕብሪ ንጽጽር ጸገማት ከስዕብ ይኽእል።

መባእታ ምስ ንጽጽር ሕብሪ

ካልኣዊ ምስ ተነጻጻሪ ሕብሪ

ዓወት ምስ ተነጻጻሪ ሕብሪ

ሓደጋ ምስ ተነጻጻሪ ሕብሪ

መጠንቀቕታ ምስ ተነጻጻሪ ሕብሪ

Info ምስ ተነጻጻሪ ሕብሪ

ብርሃን ምስ ተነጻጻሪ ሕብሪ

ጸሊም ምስ ተነጻጻሪ ሕብሪ

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>