Tae me te papamuri

Tautuhia he tae papamuri he rereke te tae o mua.

I tenei wharangi

Tirohanga

Kua taapirihia ki te v5.2.0

Ko nga kaiawhina tae me te papamuri e whakakotahi ana i te mana o a maatau .text-*taputapu me nga .bg-*taputapu i roto i te akomanga kotahi. Ma te whakamahi i ta maatau mahi Sass color-contrast(), ka whakatau aunoa i te rereke colormo tetahi background-color.

Mahunga ake! I tenei wa karekau he tautoko mo te mahi CSS-maori color-contrast, no reira ka whakamahia e maatau ake ma Sass. Ko te tikanga ko te whakarite i o maatau tae kaupapa ma nga taurangi CSS ka puta he take rerekee te tae ki enei taputapu.

Tuatahi me te tae rereke

Tuarua he rereke te tae

Ko te angitu me nga tae rereke

Te kino ki te tae rereke

Whakatupato me te tae rereke

Nga korero me nga tae rereke

He maama me te tae rereke

He pouri me te tae rereke

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>

Me nga waahanga

Whakamahia hei whakakapi mo nga huinga .text-*me .bg-*nga karaehe, penei i nga tohu :

Paraimere Nga korero

html

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

I runga ranei i nga kaari :

Pane

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

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>