in English

Färg

Bootstrap stöds av ett omfattande färgsystem som tematiserar våra stilar och komponenter. Detta möjliggör mer omfattande anpassning och förlängning för alla projekt.

På den här sidan

Temafärger

Vi använder en delmängd av alla färger för att skapa en mindre färgpalett för att generera färgscheman, även tillgänglig som Sass-variabler och en Sass-karta i Bootstraps scss/_variables.scssfil.

Primär

Sekundär

Framgång

Fara

Varning

Info

Ljus

Mörk

Alla dessa färger finns tillgängliga som en Sass-karta, $theme-colors.

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

Kolla in våra Sass-kartor och loops-dokument för hur du ändrar dessa färger.

Alla färger

Alla Bootstrap-färger är tillgängliga som Sass-variabler och en Sass-karta i scss/_variables.scssfil. För att undvika ökade filstorlekar skapar vi inte text- eller bakgrundsfärgklasser för var och en av dessa variabler. Istället väljer vi en delmängd av dessa färger för en temapalett .

Se till att övervaka kontrastförhållanden när du anpassar färger. Som visas nedan har vi lagt till tre kontrastförhållanden till var och en av huvudfärgerna – en för swatchens nuvarande färger, en för mot vit och en för mot svart.

$blått#0d6efd

$blå-100

$blå-200

$blå-300

$blå-400

$blå-500

$blå-600

$blå-700

$blå-800

$blå-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$lila#6f42c1

$lila-100

$lila-200

$lila-300

$lila-400

$lila-500

$lila-600

$lila-700

$lila-800

$lila-900

$rosa#d63384

$rosa-100

$rosa-200

$rosa-300

$rosa-400

$rosa-500

$rosa-600

$rosa-700

$rosa-800

$rosa-900

$röd#dc3545

$röd-100

röd-200 $

röd-300 $

röd-400 $

röd-500 $

röd-600 $

röd-700 $

röd-800 $

röd-900 $

$orange#fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$gul#ffc107

$ gul-100

$ gul-200

$ gul-300

$ gul-400

$ gul-500

$ gul-600

$ gul-700

$ gul-800

$ gul-900

$grön#198754

$grön-100

$grön-200

$grön-300

$grön-400

$grön-500

$grön-600

$grön-700

$grön-800

$grön-900

$kricka#20c997

kricka-100 $

kricka-200 $

kricka-300 $

kricka-400 $

kricka-500 $

kricka-600 dollar

kricka-700 $

kricka-800 $

kricka-900 $

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$grå-500#adb5bd

$grå-100

$grå-200

$grå-300

$grå-400

$grå-500

$grå-600

$grå-700

$grå-800

$grå-900

$svart#000

$vit#fff

Anteckningar om Sass

Sass kan inte programmatiskt generera variabler, så vi skapade manuellt variabler för varje nyans och nyans själva. Vi anger mittpunktsvärdet (t.ex. $blue-500) och använder anpassade färgfunktioner för att tona (ljusa) eller skugga (mörkare) våra färger via Sass mix()färgfunktion.

Att använda mix()är inte detsamma som lighten()och darken()— den förra blandar den angivna färgen med vit eller svart, medan den senare bara justerar ljushetsvärdet för varje färg. Resultatet är en mycket mer komplett svit av färger, som visas i denna CodePen-demo .

Vår tint-color()och shade-color()funktioner används mix()tillsammans med vår $theme-color-intervalvariabel, som anger ett stegvist procentvärde för varje blandad färg vi producerar. Se filen scss/_functions.scssoch scss/_variables.scssför hela källkoden.

Färg Sass kartor

Bootstraps käll Sass-filer inkluderar tre kartor som hjälper dig att snabbt och enkelt gå över en lista med färger och deras hexadecimala värden.

$colorslistar alla våra tillgängliga basfärger ( 500).
$theme-colorslistar alla semantiskt namngivna temafärger (visas nedan)
$grayslistar alla nyanser och nyanser av grått

Inom scss/_variables.scsshittar du Bootstraps färgvariabler och Sass-karta. Här är ett exempel på $colorsSass-kartan:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Lägg till, ta bort eller ändra värden i kartan för att uppdatera hur de används i många andra komponenter. Tyvärr använder inte alla komponenter denna Sass-karta för närvarande. Framtida uppdateringar kommer att sträva efter att förbättra detta. Tills dess, planera att använda ${color}variablerna och denna Sass-karta.

Exempel

Så här kan du använda dessa i din Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Färg- och bakgrundsverktygsklasser är också tillgängliga för att ställa in coloroch background-coloranvända 500färgvärdena.