Reng & paşxane

Rengek paşerojê bi rengê pêşiyê yê berevajî saz bikin.

Li ser vê rûpelê

Têgihiştinî

Di v5.2.0 de hate zêdekirin

Alîkarên reng û paşerojê hêza .text-*karûbar û .bg-*karûbarên me di yek polê de berhev dikin. Bi karanîna fonksiyona xwe ya Sass , em bixweber ji bo yek taybetî color-contrast()dijberiyek diyar dikin .colorbackground-color

Serê xwe! Heya nuha ji bo color-contrastfonksiyonek xwecî ya CSS-ê piştgirî tune, ji ber vê yekê em xweya xwe bi riya Sass bikar tînin. Ev tê vê wateyê ku xweşkirina rengên mijara me bi navgîniya guhêrbarên CSS-ê dibe ku bi van amûran re bibe sedema pirsgirêkên berevajiya rengan.

Seretayî bi rengê berevajî

Duyemîn bi rengê berevajî

Serkeftin bi rengê dijberî

Xetereya bi rengê dijber

Hişyarî bi rengê dijberî

Agahdariya bi rengê berevajî

Ronahî bi rengê dijberî

Bi rengê dijberî tarî

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>

Bi pêkhateyên

Wan li cîhê hevgirtî .text-*û .bg-*dersan bikar bînin, mîna li ser nîşanan :

Bingehîn Info

html

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

An jî li ser kartên :

Header

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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>