Awọ & abẹlẹ

Ṣeto awọ abẹlẹ pẹlu iyatọ awọ iwaju iwaju.

Lori iwe yi

Akopọ

Fi kun v5.2.0

Awọn oluranlọwọ awọ ati abẹlẹ darapọ agbara awọn .text-*ohun elo ati .bg-*awọn ohun elo wa ni kilasi kan. Lilo iṣẹ Sass color-contrast()wa, a ṣe ipinnu iyatọ laifọwọyi colorfun pato kan background-color.

Efeti sile! Lọwọlọwọ ko si atilẹyin fun iṣẹ abinibi CSS color-contrast, nitorinaa a lo tiwa nipasẹ Sass. Eyi tumọ si pe ṣiṣatunṣe awọn awọ akori wa nipasẹ awọn oniyipada CSS le fa awọn ọran itansan awọ pẹlu awọn ohun elo wọnyi.

Ni akọkọ pẹlu awọ iyatọ

Atẹle pẹlu iyatọ awọ

Aṣeyọri pẹlu iyatọ awọ

Ewu pẹlu iyatọ awọ

Ikilọ pẹlu iyatọ awọ

Alaye pẹlu iyatọ awọ

Imọlẹ pẹlu iyatọ awọ

Dudu pẹlu awọ iyatọ

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>

Pẹlu awọn paati

Lo wọn ni ipo apapọ .text-*ati .bg-*awọn kilasi, bii lori awọn baaji :

Alakoko Alaye

html

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

Tabi lori awọn kaadi :

Akọsori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

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>