Color & fondo rehegua

Emohenda peteĩ fondo color orekóva primer plano color contrastante.

Ko páhinape

Tembiecharã

Oñemoĩve v5.2.0-pe

Umi pytyvõhára color ha fondo rehegua ombojoaju ñande .text-*utilidad ha .bg-*utilidad pu’aka peteĩ clase-pe. Oipurúvo ñande color-contrast()función Sass, jadetermina ijeheguiete peteĩ contraste colorpeteĩ particular -pe g̃uarã background-color.

¡Akã yvate! Ko’áĝa rupi ndaipóri pytyvõ peteĩ tembiaporã CSS-pegua color-contrast, upévare roipuru ore mba’éva Sass rupive. Kóva he’ise ñamohenda ñande tema sa’ykuéra CSS variable rupive ikatuha omoheñói mba’e’apopy sa’y joavy rehegua ko’ã tembipuru’i ndive.

Primaria orekóva color contrastante

Secundario orekóva color contrastante

Éxito orekóva color contrastante

Peligro orekóva color contrastante

Advertencia orekóva color contrastante

Info con color contrastante rehegua

Tesape orekóva color contrastante

Pytũmby orekóva color contrastante

html rehegua

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

Umi componente reheve

Eipuru umíva combinado .text-*ha .bg-*clase rendaguépe, umi insignia reheguáicha :

Tenondeguáva Info

html rehegua

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

Térã umi tarhéta ári : .

Akãrapu’ã

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Akãrapu’ã

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

html rehegua

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