in English

Farve

Bootstrap understøttes af et omfattende farvesystem, der tematiserer vores stilarter og komponenter. Dette muliggør mere omfattende tilpasning og udvidelse til ethvert projekt.

På denne side

Tema farver

Vi bruger et undersæt af alle farver til at skabe en mindre farvepalet til generering af farveskemaer, også tilgængelig som Sass-variabler og et Sass-kort i Bootstraps scss/_variables.scssfil.

Primær

Sekundær

Succes

Fare

Advarsel

Info

Lys

Mørk

Alle disse farver er tilgængelige som et Sass-kort, $theme-colors.

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

Se vores Sass-kort og loops-dokumenter for, hvordan du ændrer disse farver.

Alle farver

Alle Bootstrap-farver er tilgængelige som Sass-variabler og et Sass-kort i scss/_variables.scssfil. For at undgå øgede filstørrelser opretter vi ikke tekst- eller baggrundsfarveklasser for hver af disse variable. I stedet vælger vi en undergruppe af disse farver til en temapalet .

Sørg for at overvåge kontrastforhold, når du tilpasser farver. Som vist nedenfor har vi tilføjet tre kontrastforhold til hver af hovedfarverne – én for farveprøvens aktuelle farver, én for mod hvid og én for sort.

$blå#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

$lilla#6f42c1

$lilla-100

$lilla-200

$lilla-300

$lilla-400

$lilla-500

$lilla-600

$lilla-700

$lilla-800

$lilla-900

$pink#d63384

$pink-100

lyserød-200 $

lyserød-300 $

lyserød-400 $

lyserød-500 $

lyserød-600 $

lyserød-700 $

$pink-800

lyserød-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

$blågrøn#20c997

100 kr

200 dollars

300 dollars

400 dollars

500 dollars

600 dollars

700 dollars

800 dollars

900 kr

$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

$sort#000

$hvid#fff

Noter om Sass

Sass kan ikke programmatisk generere variabler, så vi har manuelt oprettet variabler for hver farvetone og nuance selv. Vi angiver midtpunktsværdien (f.eks. $blue-500) og bruger brugerdefinerede farvefunktioner til at tone (lyse) eller skygge (mørke) vores farver via Sass' mix()farvefunktion.

Brug mix()er ikke det samme som lighten()og darken()— førstnævnte blander den angivne farve med hvid eller sort, mens sidstnævnte kun justerer lysstyrken for hver farve. Resultatet er en meget mere komplet suite af farver, som vist i denne CodePen-demo .

Vores tint-color()og shade-color()funktioner bruges mix()sammen med vores $theme-color-intervalvariabel, som angiver en trinvis procentværdi for hver blandet farve, vi producerer. Se filen scss/_functions.scssog scss/_variables.scssfor den fulde kildekode.

Farve Sass kort

Bootstraps kilde Sass-filer inkluderer tre kort, der hjælper dig med hurtigt og nemt at gå over en liste over farver og deres hex-værdier.

$colorsviser alle vores tilgængelige basisfarver ( 500).
$theme-colorsviser alle semantisk navngivne temafarver (vist nedenfor)
$graysviser alle nuancer og nuancer af grå

Indenfor scss/_variables.scssfinder du Bootstraps farvevariabler og Sass-kort. Her er et eksempel på $colorsSass-kortet:

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

Tilføj, fjern eller rediger værdier på kortet for at opdatere, hvordan de bruges i mange andre komponenter. Desværre på nuværende tidspunkt er det ikke alle komponenter, der bruger dette Sass-kort. Fremtidige opdateringer vil bestræbe sig på at forbedre dette. Indtil da, planlæg at gøre brug af ${color}variablerne og dette Sass-kort.

Eksempel

Sådan kan du bruge disse i din Sass:

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

Farve- og baggrundsfunktionsklasser er også tilgængelige til indstilling colorog background-colorbrug af 500farveværdierne.