Dath & cúlra

Socraigh dath cúlra le dath codarsnachta tulra.

Ar an leathanach seo

Forbhreathnú

Curtha leis in v5.2.0

Comhcheanglaíonn cúntóirí dathanna agus cúlra cumhacht ár .text-*bhfóntas agus ár .bg-*bhfóntas in aon rang. Ag baint úsáide as ár bhfeidhm Sass color-contrast(), cinnimid go huathoibríoch codarsnacht colorle haghaidh background-color.

Cinnirí suas! Níl aon tacaíocht ann faoi láthair d’ color-contrastfheidhm dhúchasach CSS, mar sin bainimid úsáid as ár gcuid féin trí Sass. Ciallaíonn sé seo go bhféadfadh fadhbanna codarsnachta datha a bheith ag baint leis na fóntais seo má dhéantar ár ndathanna téama a shaincheapadh trí athróga CSS.

Bunscoile le dath codarsnachta

Tánaisteach le dath codarsnachta

Rath le dath codarsnachta

Contúirt le dath codarsnachta

Rabhadh le dath codarsnachta

Eolas le dath codarsnachta

Solas le dath codarsnachta

Dorcha le dath codarsnachta

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 comhpháirteanna

Úsáid iad in ionad comhcheangailte .text-*agus .bg-*ranganna, mar shampla ar shuaitheantais :

Bunscoile Eolas

html

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

Nó ar chártaí :

Ceanntásc

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta 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>