Cores
Transmite significado a través da cor cun puñado de clases de utilidade de cor. Tamén inclúe compatibilidade con ligazóns de estilo con estados de paso.
Cor
.texto-primario
.texto-secundario
.texto-éxito
.texto-perigo
.texto-aviso
.text-info
.texto-luz
.texto-escuro
.texto-corpo
.texto silenciado
.texto-branco
.texto-negro-50
.texto-branco-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>As clases de texto contextuais tamén funcionan ben nas áncoras cos estados de enfoque e de paso proporcionados. Teña en conta que a clase .text-whitee .text-mutednon ten un estilo de ligazón adicional ademais do subliñado.
<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>Cor de fondo
Semellante ás clases de cor de texto contextual, establece facilmente o fondo dun elemento para calquera clase contextual. Os compoñentes da ancoraxe escureceranse ao pasar o cursor, igual que as clases de texto. As utilidades en segundo plano non se configurancolor , polo que nalgúns casos quererá usar as .text-*utilidades.
<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>Degradado de fondo
Cando $enable-gradientsse establece en true(o predeterminado é false), pode usar .bg-gradient-clases de utilidade. Obtén información sobre as nosas opcións de Sass para activar estas clases e moito máis.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Tratar a especificidade
Ás veces non se poden aplicar clases contextuais debido á especificidade doutro selector. Nalgúns casos, unha solución suficiente é envolver o contido do elemento nunha <div>clase coa clase.
Transmitir significado ás tecnoloxías de asistencia
Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.