Color & fondo

Huk fondo colorta churay contrastante ñawpaq colorwan.

Kay p'anqapi

Hatun qhawariy

v5.2.0 nisqapi yapasqa

Color chaymanta qhipa yanapaqkuna huk clase kaqpi .text-*utilidadniyku chaymanta .bg-*utilidadniykupa atiyninta huñunku . Sass ruwanaykuwan color-contrast()llamk'achispa, kikillanmanta huk contrastante colorhuk particular kaqpaq determinayku background-color.

¡Umakuna wichayman! Kunanqa mana huk CSS-nativo color-contrastruwanapaq yanapakuy kanchu, chayrayku ñuqaykupaq Sass kaqnintakama llamk'achiyku. Kayqa niyta munan kay tema coloresniyku CSS variables kaqnintakama ruwayqa kay yanapakuykunawan color contraste sasachakuykunata ruwanman.

Primaria con color contrastante

Secundario con color contrastante

Éxito con color contrastante

Peligro con color contrastante

Contrastante colorwan advertencia

Info con color contrastante

Contrastante colorniyuq k’anchay

Tutayaq contrastante colorniyuq

html nisqapi

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

Con componentes

Utilizarlos en lugar de combinados .text-*y .bg-*clases, como en insignias :

Qallariq Info

html nisqapi

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

Utaq tarjetakunapi :

Uma

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Uma

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

html nisqapi

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