Cores
Transmita significado colorcom um punhado de classes de utilidade de cores. Inclui suporte para links de estilo com estados de foco também.
Cores
Colorir texto com utilitários de cor. Se você quiser colorir links, você pode usar as .link-*classes auxiliares que possuem :hovere :focusestados.
.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
<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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.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>Transmitindo significado às tecnologias assistivas
O uso de 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 .visually-hiddenclasse.
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 um <div>ou mais elementos semânticos com a classe desejada.
Sass
Além da funcionalidade Sass a seguir, considere ler sobre nossas propriedades personalizadas CSS incluídas (também conhecidas como variáveis CSS) para cores e muito mais.
Variáveis
A maioria dos colorutilitários é gerada por nossas cores de tema, reatribuídas de nossas variáveis genéricas de paleta de cores.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
As cores em tons de cinza também estão disponíveis, mas apenas um subconjunto é usado para gerar quaisquer utilitários.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Mapa
As cores do tema são então colocadas em um mapa Sass para que possamos fazer um loop sobre elas para gerar nossos utilitários, modificadores de componentes e muito mais.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
As cores em tons de cinza também estão disponíveis como um mapa Sass. Este mapa não é usado para gerar nenhum utilitário.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
API de utilitários
Os utilitários de cores são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),