Langi & fond

Tyá langi ya nsima na langi ya liboso oyo ekeseni.

Na lokasa oyo

Botali ya mozindo

Ebakisami na v5.2.0

Basalisi ya langi mpe ya nsima esangisaka nguya ya ba .text-*utilités mpe .bg-*ba utilités na biso na kelasi moko. Na kosalelaka fonction na biso ya Sass color-contrast(), to déterminer automatiquement contrasting colormoko pona background-color.

Mitó likoló! Na tango oyo, lisungi ezali te mpo na color-contrastfonction CSS-native, yango wana tosalelaka oyo ya biso na nzela ya Sass. Yango elingi koloba ete ko personnaliser ba couleurs ya thème na biso na nzela ya ba variables CSS ekoki kosala ba problèmes ya contraste ya couleur na ba utilitaires oyo.

Primaire na couleur oyo ekeseni

Secondaire na couleur contrastée

Succès na couleur contrasting

Likama na langi oyo ekeseni

Kebisa na langi oyo ekeseni

Info na couleur contrastée

Pole na langi oyo ekeseni

Molili na langi oyo ekeseni

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>

Na ba composants

Salelá yango na esika ya kosangisa .text-*mpe ya .bg-*kelasi, lokola na badge :

Ya liboso Info

html

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

To na bakarte :

Motó ya likambo

Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.

Motó ya likambo

Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.

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>