Renkler

Bir avuç renk yardımcı sınıfıyla renk aracılığıyla anlamı iletin. Vurgulu durumları olan bağlantıların stillendirilmesi için de destek içerir.

Renk

.text-birincil

.text-ikincil

.text-başarı

.text-tehlike

.text-uyarı

.text-bilgi

.text-ışık

.text-dark

.text-body

.text-sessiz

.text-beyaz

.text-siyah-50

.text-beyaz-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Bağlamsal metin sınıfları, sağlanan vurgulu ve odak durumlarıyla bağlantılarda da iyi çalışır. and sınıfının altı çizili dışında ek bağlantı stili olmadığını unutmayın ..text-white.text-muted

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Arka plan rengi

Bağlamsal metin renk sınıflarına benzer şekilde, bir öğenin arka planını herhangi bir bağlamsal sınıfa kolayca ayarlayın. Bağlantı bileşenleri, tıpkı metin sınıfları gibi, üzerine gelindiğinde kararacaktır. Arka plan yardımcı programları ayarlanmazcolor , bu nedenle bazı durumlarda yardımcı programları kullanmak isteyeceksiniz .text-*.

.bg-birincil

.bg-ikincil

.bg-başarı

.bg-tehlike

.bg-uyarı

.bg-bilgi

.bg-light

.bg-karanlık

.bg-beyaz

.bg-şeffaf

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Arka plan gradyanı

$enable-gradientstrue olarak ayarlandığında, yardımcı .bg-gradient-program sınıflarını kullanabileceksiniz. Varsayılan $enable-gradientsolarak devre dışıdır ve aşağıdaki örnek kasıtlı olarak bozulmuştur. Bu, Bootstrap'ı kullanmaya başladığınız andan itibaren daha kolay özelleştirme için yapılır. Bu sınıfları ve daha fazlasını etkinleştirmek için Sass seçeneklerimiz hakkında bilgi edinin .

.bg-gradient-birincil

.bg-gradient-ikincil

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-uyarı

.bg-gradient-info

.bg-gradyan-ışık

.bg-gradient-dark

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

Spesifiklikle başa çıkmak

Bazen, başka bir seçicinin özgüllüğü nedeniyle bağlamsal sınıflar uygulanamaz. Bazı durumlarda, öğenizin içeriğini <div>sınıfla birlikte sarmak yeterli bir geçici çözümdür.

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.