Loko & fiaviana

Mametraha loko ambadika misy loko mifanohitra mifanohitra.

Amin'ity pejy ity

Overview

Nampiana v5.2.0

Ny mpanampy loko sy lafika dia manambatra ny herin'ny .text-*kojakoja sy ny .bg-*kojakoja ao anatin'ny kilasy iray. Amin'ny fampiasana ny fiasa Sass color-contrast(), dia mamaritra ho azy ny fifanoherana colorho an'ny background-color.

Fampitandremana! Tsy misy fanohanana ho an'ny color-contrastfiasa CSS-native amin'izao fotoana izao, noho izany dia mampiasa ny anay amin'ny alàlan'ny Sass izahay. Midika izany fa mety hiteraka olana amin'ny fifanoheran'ny loko amin'ireo kojakoja ireo ny fanamboarana ny loko loha-hevitray amin'ny alàlan'ny CSS.

Kilonga misy loko mifanohitra

Faharoa misy loko mifanohitra

Fahombiazana amin'ny loko mifanohitra

Loza misy loko mifanohitra

Fampitandremana amin'ny loko mifanohitra

Info misy loko mifanohitra

Maivana misy loko mifanohitra

Maizina misy loko mifanohitra

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>

Miaraka amin'ny singa

Ampiasao izy ireo ho solon'ny fitambarana .text-*sy .bg-*kilasy, toy ny amin'ny badge :

Kilonga Info

html

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

Na amin'ny karatra :

Lohapejy

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

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>