in English

Cores

Transmite significado a través colordun puñado de clases de utilidade de cores. Tamén inclúe compatibilidade con ligazóns de estilo con estados de paso.

Nesta páxina

Cores

Colorea o texto con utilidades de cor. Se queres colorear as ligazóns, podes usar as .link-*clases auxiliares que teñen :hovere :focusindica.

.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 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>

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 .visually-hiddenclase.

Especificidade

Ás veces non se poden aplicar clases contextuais debido á especificidade doutro selector. Nalgúns casos, unha solución alternativa é envolver o contido do elemento nun <div>ou máis elementos semánticos coa clase desexada.

Sass

Ademais da seguinte funcionalidade de Sass, considera ler sobre as nosas propiedades personalizadas CSS incluídas (tamén coñecidas como variables CSS) para cores e moito máis.

Variables

A maioría das colorutilidades son xeradas polas cores dos nosos temas, reasignadas a partir das variables xenéricas da nosa 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;

Tamén están dispoñibles cores en escala de grises, pero só se usa un subconxunto para xerar utilidades.

$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

A continuación, as cores dos temas colócanse nun mapa Sass para que poidamos pasar sobre elas para xerar as nosas utilidades, modificadores de compoñentes e moito máis.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

As cores en escala de grises tamén están dispoñibles como mapa Sass. Este mapa non se usa para xerar ningunha utilidade.

$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 utilidades

As utilidades de cores decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

    "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,
        )
      )
    ),