Dath & cùl-raon

Suidhich dath cùl-raoin le dath aghaidh aghaidh eadar-dhealaichte.

Air an duilleig seo

Ro-shealladh

Air a chur ris ann an v5.2.0

Bidh luchd-cuideachaidh dath is cùl-raon a’ cothlamadh cumhachd ar .text-*goireasan agus .bg-*goireasan ann an aon chlas. A’ cleachdadh ar gnìomh Sass color-contrast(), bidh sinn gu fèin-obrachail a’ dearbhadh coimeas eadar-dhealaichte colorairson background-color.

Cinn suas! Chan eil taic ann an-dràsta airson color-contrastgnìomh dùthchasach CSS, agus mar sin bidh sinn a’ cleachdadh ar cuid fhèin tro Sass. Tha seo a’ ciallachadh gum faodadh a bhith a’ gnàthachadh ar dathan cuspaireil tro chaochladairean CSS cùisean iomsgaradh dath adhbhrachadh leis na goireasan sin.

Bun-sgoil le dath eadar-dhealaichte

Àrd-sgoil le dath eadar-dhealaichte

Soirbheachas le dath eadar-dhealaichte

Cunnart le dath eadar-dhealaichte

Rabhadh le dath eadar-dhealaichte

Fiosrachadh le dath eadar-dhealaichte

Solas le dath eadar-dhealaichte

Dorcha le dath eadar-dhealaichte

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>

Le co-phàirtean

Cleachd iad an àite clasaichean còmhla .text-*agus , mar air bràistean :.bg-*

Bun-sgoil Fiosrachadh

html

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

No air cairtean :

Ceann-cinnidh

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

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>