Renk ve arka plan

Kontrast ön plan rengiyle bir arka plan rengi ayarlayın.

Bu sayfada

genel bakış

v5.2.0'da eklendi

.text-*Renk ve arka plan yardımcıları, yardımcı programlarımızın ve .bg-*yardımcı programlarımızın gücünü tek bir sınıfta birleştirir. Sass color-contrast()işlevimizi kullanarak, colorbelirli bir background-color.

Önüne bak! Şu anda yerel bir CSS color-contrastişlevi için destek yok, bu nedenle Sass aracılığıyla kendimizinkini kullanıyoruz. Bu, tema renklerimizi CSS değişkenleri aracılığıyla özelleştirmenin bu yardımcı programlarda renk kontrastı sorunlarına neden olabileceği anlamına gelir.

Kontrast renkli birincil

Kontrast renkli ikincil

Zıt renklerle başarı

Zıt renkli tehlike

Kontrast renk ile uyarı

Kontrast renkli bilgi

Kontrast renkli ışık

Kontrast renkli koyu

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>

bileşenleri ile

Rozetlerde olduğu gibi, bunları birleştirilmiş .text-*ve .bg-*sınıflar yerine kullanın :

Öncelik Bilgi

html

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

Veya kartlarda :

başlık

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

başlık

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

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>