Faarf

Bootstrap gëtt ënnerstëtzt vun engem extensiv Faarfsystem deen eis Stiler a Komponenten thematiséiert. Dëst erméiglecht méi ëmfaassend Personnalisatioun an Extensioun fir all Projet.

Op dëser Säit

Thema Faarwen

Mir benotzen en Ënnerdeel vun alle Faarwen fir eng méi kleng Faarfpalette ze kreéieren fir Faarfschemaen ze generéieren, och verfügbar als Sass Variablen an eng Sass Kaart an der Bootstrap scss/_variables.scssDatei.

Primär

Secondaire

Erfolleg

Gefor

Warnung

Info

Liicht

Däischter

All dës Faarwen sinn als Sass Kaart verfügbar $theme-colors,.

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

Kuckt eis Sass Kaarten a Loops Dokumenter fir wéi Dir dës Faarwen ännert.

All Faarwen

All Bootstrap Faarwen sinn als Sass Variablen an eng Sass Kaart an der scss/_variables.scssDatei verfügbar. Fir vergréissert Dateigréissten ze vermeiden, kreéiere mir keng Text- oder Hannergrondfaarfklassen fir all dës Variabelen. Amplaz wielen mir e Subset vun dëse Faarwen fir eng Themepalette .

Gitt sécher Kontrastverhältnisser ze iwwerwaachen wéi Dir Faarwen personaliséiert. Wéi hei ënnendrënner, hu mir dräi Kontrastverhältnisser zu jiddereng vun den Haaptfaarwe bäigefüügt - eng fir déi aktuell Faarwen vun der Swatch, eng fir géint Wäiss, an een fir géint Schwaarz.

$blo#0d6efd

$ blo-100

$ blo-200

$ blo-300

$ blo-400

$ blo-500

$ blo-600

$ blo-700

$ blo-800

$ blo-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$violett#6f42c1

$ purpurroude-100

$ purpurroude-200

$ purpurroude-300

$ purpurroude-400

$ purpurroude-500

$ purpurroude-600

$ purpurroude-700

$ purpurroude-800

$ purpurroude-900

$rosa#d63384

$rosa-100

$rosa-200

$ rosa-300

$rosa-400

$ rosa-500

$rosa-600

$ rosa-700

$rosa-800

$ rosa-900

$rout#dc3545

$ rout-100

$ rout-200

$ rout-300

$ rout-400

$ rout-500

$ rout-600

$ rout-700

$ rout-800

$ rout-900

$orange#fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$giel#ffc107

$ giel-100

$ giel-200

$ giel-300

$ giel-400

$ giel-500

$giel-600

$ giel-700

$ giel-800

$ giel-900

$gréng#198754

$gréng-100

$ gréng-200

$ gréng-300

$ gréng-400

$gréng-500

$gréng-600

$ gréng-700

$gréng-800

$ gréng-900

$tier#20c997

$ blo-100

$ blo-200

$ tierkesch-300

$ tierkesch-400

$ tierkesch-500

$ tier-600

$ blo-700

$ tier-800

$ tier-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$grau-500#adb5bd

$grau-100

$grau-200

$grau-300

$grau-400

$grau-500

$grau-600

$grau-700

$grau-800

$grau-900

$schwaarz#000

$wäiss#fff

Notes op Sass

Sass kann net programmatesch Variabelen generéieren, sou datt mir manuell Variablen fir all Tint a Schiet selwer erstallt hunn. Mir spezifizéieren de Mëttelpunktwäert (zB, $blue-500) a benotze personaliséiert Faarffunktiounen fir eis Faarwen iwwer Sass seng Faarffunktioun ze schaarfen (beliichten) oder ze schaarfen (däischter) mix().

D'Benotzung mix()ass net d'selwecht wéi lighten()an darken()- dee fréiere vermëscht déi spezifizéiert Faarf mat wäiss oder schwaarz, während dee Leschten nëmmen de Liichtwäerter vun all Faarf upasst. D'Resultat ass eng vill méi komplett Suite vu Faarwen, wéi an dëser CodePen Demo gewisen .

Eis tint-color()a shade-color()Funktiounen benotzen mix()niewt eiser $theme-color-intervalVariabel, déi e stepped Prozentsaz Wäert fir all gemëschte Faarf spezifizéiert déi mir produzéieren. Kuckt d' scss/_functions.scssa scss/_variables.scssDateien fir de komplette Quellcode.

Faarf Sass Kaarten

Bootstrap Quell Sass Dateien enthalen dräi Kaarten fir Iech ze hëllefen séier an einfach iwwer eng Lëscht vu Faarwen an hir Hexwäerter ze schloen.

$colorslëscht all eis verfügbar Basis ( 500) Faarwen
$theme-colorsLëscht all semantesch benannt Thema Faarwen (ënnert gewisen)
$graysLëscht all Téin a Schatten vu gro

Bannen scss/_variables.scssfannt Dir Bootstrap Faarfvariablen a Sass Kaart. Hei ass e Beispill vun der $colorsSass Kaart:

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

Füügt, läscht oder ännert Wäerter bannent der Kaart fir ze aktualiséieren wéi se a villen anere Komponenten benotzt ginn. Leider zu dëser Zäit benotzt net all Komponent dës Sass Kaart. Zukünfteg Updates wäerte probéieren dëst ze verbesseren. Bis dohin, plangt d' ${color}Verännerlechen an dës Sass Kaart ze benotzen.

Beispill

Hei ass wéi Dir dës an Ärem Sass benotze kënnt:

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

Faarf an Hannergrond Utility Klassen sinn och verfügbar fir d'Faarfwäerter ze setzen coloran ze background-colorbenotzen 500.