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, metin sınıfları gibi fareyle üzerine gelindiğinde kararacaktır. Arka plan yardımcı programları ayarlanmazcolor , bu nedenle bazı durumlarda yardımcı programları kullanmak isteyeceksiniz .text-*.
<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ı
(varsayılan ) $enable-gradientsolarak ayarlandığında , yardımcı program sınıflarını kullanabilirsiniz . Bu sınıfları ve daha fazlasını etkinleştirmek için Sass seçeneklerimiz hakkında bilgi edinin .truefalse.bg-gradient-
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
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.