Ранг ва замина

Ранги заминаро бо ранги пешинааш муқоиса кунед.

Дар ин саҳифа

Барраси

Дар v5.2.0 илова карда шудааст

Ёрдамчиёни ранг ва замина қудрати .text-*коммуналӣ ва .bg-*коммуналии моро дар як синф муттаҳид мекунанд. Бо истифода аз функсияи Sass color-contrast(), мо ба таври худкор муқоисаро colorбарои як background-color.

Сарҳо боло! Дар айни замон ягон функсияи CSS-и модарӣ color-contrastвуҷуд надорад, аз ин рӯ мо функсияи худро тавассути Sass истифода мебарем. Ин маънои онро дорад, ки танзим кардани рангҳои мавзӯии мо тавассути тағирёбандаҳои CSS метавонад бо ин утилитҳо мушкилоти контрасти рангҳоро ба вуҷуд орад.

Асосӣ бо ранги контраст

Дуюм бо ранги контраст

Муваффақият бо ранги контраст

Хатар бо ранги контраст

Огоҳӣ бо ранги контраст

Маълумот бо ранги контраст

Нур бо ранги контраст

Торик бо ранги контраст

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>

Бо компонентҳо

Онҳоро дар ҷои якҷояшуда .text-*ва .bg-*синфҳо истифода баред, ба монанди нишонаҳо :

ибтидоӣ Маълумот

html

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

Ё дар кортҳои :

Сарлавҳа

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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>