Spring til hovedindhold Spring til dokumentnavigation

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

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.

  1. For at starte skal du sørge for, at du har importeret vores funktioner, variabler, mixins og hjælpeprogrammer.
  2. Brug vores map-merge-multiple()funktion til hurtigt at flette flere Sass-kort sammen i et nyt kort.
  3. 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.