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

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

Generering af hjælpeprogrammer

Tilføjet i v5.1.0

Bootstrap inkluderer ikke hjælpeprogrammer colorfor background-colorhver farvevariabel, men du kan selv generere disse med vores utility API og vores udvidede Sass-kort tilføjet i v5.1.0.

For at starte skal du sørge for, at du har importeret vores funktioner, variabler, mixins og hjælpeprogrammer.
Brug vores map-merge-multiple()funktion til hurtigt at flette flere Sass-kort sammen i et nyt kort.
Flet dette nye kombinerede kort for at udvide ethvert hjælpeprogram med et {color}-{level}klassenavn.

Her er et eksempel, der genererer tekstfarveværktøjer (f.eks. .text-purple-500) ved hjælp af ovenstående trin.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Dette vil generere nye .text-{color}-{level}hjælpeprogrammer for hver farve og niveau. Du kan også gøre det samme for enhver anden forsyning og ejendom.