Cores
Transmita significado através da cor com um punhado de classes de utilidade de cores. Inclui suporte para links de estilo com estados de foco também.
Cor
.text-primary
.text-secondary
.text-sucesso
.text-perigo
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-silenciado
.text-white
.text-black-50
.text-white-50
As classes de texto contextuais também funcionam bem em âncoras com os estados de foco e foco fornecidos. Observe que a classe .text-white
and .text-muted
não tem nenhum estilo de link adicional além do sublinhado.
Cor de fundo
Semelhante às classes de cores de texto contextuais, defina facilmente o plano de fundo de um elemento para qualquer classe contextual. Os componentes âncora escurecerão ao passar o mouse, assim como as classes de texto. Os utilitários em segundo plano não definemcolor
, portanto, em alguns casos, você desejará usar .text-*
utilitários.
Gradiente de fundo
Quando $enable-gradients
está definido como true
(o padrão é false
), você pode usar .bg-gradient-
classes de utilitários. Saiba mais sobre nossas opções de Sass para habilitar essas classes e muito mais.
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
Lidando com a especificidade
Às vezes, as classes contextuais não podem ser aplicadas devido à especificidade de outro seletor. Em alguns casos, uma solução alternativa suficiente é envolver o conteúdo do seu elemento em a <div>
com a classe.
Transmitindo significado às tecnologias assistivas
Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-only
classe.