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>

Utfasning: Med tillägg av .text-opacity-*verktyg och CSS-variabler för textverktyg, .text-black-50och .text-white-50är utfasade från och med v5.1.0. De kommer att tas bort i v6.0.0.

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.

Opacitet

Lades till i v5.1.0

Från och med v5.1.0 genereras textfärgverktyg med Sass med hjälp av CSS-variabler. Detta möjliggör färgändringar i realtid utan kompilering och dynamiska förändringar av alfatransparens.

Hur det fungerar

Tänk på vårt standardverktyg .text-primary.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Vi använder en RGB-version av vår --bs-primary(med värdet av 13, 110, 253) CSS-variabel och bifogade en andra CSS-variabel, --bs-text-opacity, för alfatransparensen (med ett standardvärde 1tack vare en lokal CSS-variabel). Det betyder att när som helst du använder .text-primarynu är ditt beräknade colorvärde rgba(13, 110, 253, 1). Den lokala CSS-variabeln inuti varje .text-*klass undviker arvsproblem så att kapslade instanser av verktygen inte automatiskt har en modifierad alfatransparens.

Exempel

För att ändra den opaciteten, åsidosätt --bs-text-opacityvia anpassade stilar eller inline-stilar.

Detta är standard primärtext

Detta är primärtext med 50 % opacitet

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

Eller välj från något av .text-opacityverktygen:

Detta är standard primärtext

Detta är primärtext med 75 % opacitet

Detta är primärtext med 50 % opacitet

Detta är primärtext med 25 % opacitet

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

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

RGB-färger genereras från en separat Sass-karta:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Och färgopacitet bygger på det med sin egen karta som konsumeras av verktygs-API:

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

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