Xim & keeb kwm yav dhau

Teem xim tom qab nrog qhov sib txawv ntawm cov xim pem hauv ntej.

Ntawm nplooj ntawv no

Txheej txheem cej luam

Ntxiv hauv v5.2.0

Cov xim thiab cov pab cuam tom qab sib xyaw ua ke lub zog ntawm peb cov .text-*khoom siv hluav taws xob thiab .bg-*cov khoom siv hauv ib chav kawm. Siv peb txoj haujlwm Sass color-contrast(), peb txiav txim siab qhov sib txawv colorrau ib qho tshwj xeeb background-color.

Tau taub hau! Tam sim no tsis muaj kev txhawb nqa rau CSS-native color-contrastmuaj nuj nqi, yog li peb siv peb tus kheej ntawm Sass. Qhov no txhais tau hais tias customizing peb lub ntsiab xim ntawm CSS variables yuav ua rau muaj teeb meem xim sib txawv nrog cov khoom siv no.

Thawj nrog cov xim sib txawv

Secondary nrog contrasting xim

Kev vam meej nrog cov xim sib txawv

Kev phom sij nrog cov xim sib txawv

Ceeb toom nrog cov xim sib txawv

Cov ntaub ntawv nrog cov xim sib txawv

Lub teeb nrog cov xim sib txawv

Tsaus nrog contrasting xim

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>

Nrog cov khoom siv

Siv lawv nyob rau hauv qhov chaw ntawm kev sib koom ua ke .text-*thiab .bg-*cov chav kawm, xws li ntawm cov paib :

Thawj Cov ntaub ntawv

html

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

Los yog ntawm daim npav :

Lub taub hau

Qee cov ntawv piv txwv ceev los tsim cov npe ntawm daim npav thiab ua kom muaj ntau ntawm daim npav cov ntsiab lus.

Lub taub hau

Qee cov ntawv piv txwv ceev los tsim cov npe ntawm daim npav thiab ua kom muaj ntau ntawm daim npav cov ntsiab lus.

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>