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>.text-opacity-*utilitários e variáveis CSS para utilitários de texto,
.text-black-50e
.text-white-50estão obsoletos a partir da v5.1.0. Eles serão removidos na v6.0.0.
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 .visually-hiddenclasse.
Opacidade
Adicionado na v5.1.0
A partir da v5.1.0, os utilitários de cor de texto são gerados com Sass usando variáveis CSS. Isso permite alterações de cores em tempo real sem compilação e alterações dinâmicas de transparência alfa.
Como funciona
Considere nosso .text-primaryutilitário padrão.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Usamos uma versão RGB de nossa variável CSS --bs-primary(com o valor de 13, 110, 253) e anexamos uma segunda variável CSS, --bs-text-opacity, para a transparência alfa (com um valor padrão 1graças a uma variável CSS local). Isso significa que sempre que você usar agora, seu valor .text-primarycalculado será . A variável CSS local dentro de cada classe evita problemas de herança para que instâncias aninhadas dos utilitários não tenham automaticamente uma transparência alfa modificada.colorrgba(13, 110, 253, 1).text-*
Exemplo
Para alterar essa opacidade, substitua --bs-text-opacitypor estilos personalizados ou estilos embutidos.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Ou escolha qualquer um dos .text-opacityutilitários:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>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
);
As cores RGB são geradas a partir de um mapa Sass separado:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
E as opacidades de cores se baseiam nisso com seu próprio mapa que é consumido pela API de utilitários:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
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,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),