Lanu & talaaga

Seti se lanu pito i tua ma le ese'ese o le lanu pito i luma.

I luga o lenei itulau

Vaaiga lautele

Fa'aopoopo i le v5.2.0

O fesoasoani lanu ma tua'oi e tu'ufa'atasia le malosi oa tatou .text-*mea fa'aoga ma .bg-*mea aoga i le vasega e tasi. I le faʻaaogaina o la matou galuega Sass color-contrast(), matou te otometi lava ona fuafua se faʻatusatusaga colormo se background-color.

Ulu i luga! Ole taimi nei e leai se lagolago mo se CSS-native color-contrastfunction, o lea matou te faʻaogaina ai matou lava e ala i Sass. O lona uiga o le fa'avasegaina o a tatou lanu autu e ala i suiga CSS e ono mafua ai fa'afitauli fa'afeagai lanu ma nei mea aoga.

Peraimeri ma lanu eseese

Lua ma lanu eseese

Manuia i lanu eseese

Mata'utia i lanu eseese

Lapataiga ma lanu eseese

Fa'amatalaga ma lanu eseese

Malamalama ma lanu eseese

Pogisa ma lanu eseese

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>

Faatasi ai ma vaega

Fa'aoga i latou e suitulaga i tu'ufa'atasi .text-*ma .bg-*vasega, pei o pine :

Peraimeri Fa'amatalaga

html

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

Po'o luga o kata :

Ulutala

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

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>