Kolor & likudan

Mangipasdek iti kolor ti likudan nga addaan iti agduma a kolor ti sango.

Iti daytoy a panid

Panangkita iti pakabuklan

Nainayon iti v5.2.0

Dagiti katulongan ti kolor ken background ket pagtitiponenda ti bileg dagiti .text-*utilities ken .bg-*utilities -tayo iti maysa a klase. Babaen ti panagusar ti Sass color-contrast()function tayo, automatiko nga ikeddeng tayo ti contrasting colorpara iti partikular background-color.

Ulo nga agpangato! Awan ti agdama a suporta para iti CSS-native color-contrastfunction, isu nga usarenmi ti bukodmi babaen ti Sass. Kayatna a sawen a ti panangipasayaat kadagiti kolor ti tematayo babaen dagiti variable ti CSS ket mabalin a mangpataud kadagiti isyu ti panagdumaduma ti kolor kadagitoy a utilidad.

Primary nga addaan iti agduma a kolor

Segundario nga addaan iti agduma a kolor

Balligi nga addaan iti agduma a kolor

Peligro nga addaan iti agduma a kolor

Pakdaar nga addaan iti agduma a kolor

Info nga addaan iti agduma a kolor

Lawag nga addaan iti agduma a kolor

Nasipnget nga addaan iti agduma a kolor

html nga

<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>

Adda dagiti paset

Usaren dagitoy a kasukat dagiti napagtipon .text-*ken .bg-*dagiti klase, kas kadagiti badge :

Kangrunaan Info nga

html nga

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

Wenno kadagiti kard :

Ulo ti ulo

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

html nga

<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>