Farge

Bootstrap støttes av et omfattende fargesystem som tematiserer stilene og komponentene våre. Dette muliggjør mer omfattende tilpasning og utvidelse for ethvert prosjekt.

På denne siden

Temafarger

Vi bruker et undersett av alle farger for å lage en mindre fargepalett for å generere fargeskjemaer, også tilgjengelig som Sass-variabler og et Sass-kart i Bootstraps scss/_variables.scssfil.

Hoved

Sekundær

Suksess

Fare

Advarsel

Info

Lys

Mørk

Alle disse fargene er tilgjengelige som et Sass-kart, $theme-colors.

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

Sjekk ut våre Sass-kart og loops-dokumenter for hvordan du endrer disse fargene.

Alle farger

Alle Bootstrap-farger er tilgjengelige som Sass-variabler og et Sass-kart i scss/_variables.scssfil. For å unngå økte filstørrelser lager vi ikke tekst- eller bakgrunnsfargeklasser for hver av disse variablene. I stedet velger vi en undergruppe av disse fargene for en temapalett .

Sørg for å overvåke kontrastforhold når du tilpasser farger. Som vist nedenfor har vi lagt til tre kontrastforhold til hver av hovedfargene – én for fargeprøvens nåværende farger, én mot hvit og én mot svart.

$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

$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

$oransje#fd7e14

$oransje-100

$oransje-200

$oransje-300

$oransje-400

$oransje-500

$oransje-600

$oransje-700

$oransje-800

$oransje-900

$gul#ffc107

$ gul-100

$gul-200

$ gul-300

$ gul-400

$ gul-500

$gul-600

$ gul-700

$ gul-800

$ gul-900

$grønn#198754

$grønn-100

$grønn-200

$grønn-300

$grønn-400

$grønn-500

$grønn-600

$grønn-700

$grønn-800

$grønn-900

$blågrønn#20c997

$grønngrønn-100

200 dollar

$grønngrønn-300

$grønngrønn-400

500 dollar

$blågrønn-600

700 dollar

800 dollar

900 dollar

$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

$hvit#fff

Merknader om Sass

Sass kan ikke programmatisk generere variabler, så vi laget manuelt variabler for hver fargetone og nyanse selv. Vi spesifiserer midtpunktsverdien (f.eks. $blue-500) og bruker egendefinerte fargefunksjoner for å tone (lyse opp) eller skygge (mørke) fargene våre via Sass sin mix()fargefunksjon.

Bruk mix()er ikke det samme som lighten()og darken()— førstnevnte blander den angitte fargen med hvit eller svart, mens sistnevnte bare justerer lysstyrken til hver farge. Resultatet er en mye mer komplett serie med farger, som vist i denne CodePen-demoen .

Vår tint-color()og shade-color()funksjoner brukes mix()sammen med $theme-color-intervalvariabelen vår, som spesifiserer en trinnvis prosentverdi for hver blandede farge vi produserer. Se filene scss/_functions.scssog scss/_variables.scssfor hele kildekoden.

Farge Sass kart

Bootstraps kilde Sass-filer inkluderer tre kart som hjelper deg raskt og enkelt å gå over en liste over farger og deres hex-verdier.

$colorsviser alle våre tilgjengelige 500grunnfarger ( ).
$theme-colorsviser alle semantisk navngitte temafarger (vist nedenfor)
$graysviser alle nyanser og nyanser av grått

Innenfor scss/_variables.scssfinner du Bootstraps fargevariabler og Sass-kart. Her er et eksempel på $colorsSass-kartet:

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

Legg til, fjern eller endre verdier i kartet for å oppdatere hvordan de brukes i mange andre komponenter. Dessverre på dette tidspunktet er det ikke alle komponenter som bruker dette Sass-kartet. Fremtidige oppdateringer vil forsøke å forbedre dette. Inntil da, planlegg å bruke ${color}variablene og dette Sass-kartet.

Eksempel

Slik kan du bruke disse i Sass:

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

Farge- og bakgrunnsverktøyklasser er også tilgjengelige for innstilling colorog background-colorbruk av 500fargeverdiene.