Färger

Förmedla mening colormed en handfull färgklasser. Inkluderar även stöd för stylinglänkar med svävartillstånd.

På den här sidan

Färger

Färglägg text med färgverktyg. Om du vill färglägga länkar kan du använda .link-*hjälpklasserna som har :hoveroch :focusanger.

.text-primär

.text-sekundär

.text-framgång

.text-fara

.text-varning

.text-info

.text-ljus

.text-mörk

.text-body

.text-dämpad

.text-vit

.text-svart-50

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

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .visually-hiddenklassen.

Specificitet

Ibland kan inte kontextuella klasser tillämpas på grund av specificiteten hos en annan väljare. I vissa fall är en tillräcklig lösning att linda in ditt elements innehåll i ett <div>eller flera semantiskt element med önskad klass.

Sass

Utöver följande Sass-funktionalitet, överväg att läsa om våra inkluderade anpassade CSS-egenskaper (alias CSS-variabler) för färger och mer.

Variabler

De flesta colorverktyg genereras av våra temafärger, omtilldelade från våra generiska färgpalettvariabler.

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

Gråskalefärger är också tillgängliga, men endast en delmängd används för att generera några verktyg.

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

Karta

Temafärger läggs sedan in i en Sass-karta så att vi kan loopa över dem för att generera våra verktyg, komponentmodifierare och mer.

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

Gråskalefärger finns också tillgängliga som en Sass-karta. Den här kartan används inte för att generera några verktyg.

$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
);

Utilities API

Färgverktyg deklareras i vårt verktygs-API i scss/_utilities.scss. Lär dig hur du använder utilities API.

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