Kleur

Bootstrap wurdt stipe troch in wiidweidich kleursysteem dat ús stilen en komponinten tematearret. Dit makket mear wiidweidige oanpassing en útwreiding mooglik foar elk projekt.

Op dizze side

Tema kleuren

Wy brûke in subset fan alle kleuren om in lytser kleurpalet te meitsjen foar it generearjen fan kleurskema's, ek beskikber as Sass-fariabelen en in Sass-kaart yn Bootstrap's scss/_variables.scssbestân.

Primêr

Sekundêr

Sukses

Gefaar

Warskôging

Info

Ljocht

Tsjuster

Al dizze kleuren binne beskikber as in Sass map $theme-colors,.

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

Besjoch ús Sass-kaarten en loops-dokuminten foar hoe't jo dizze kleuren kinne feroarje.

Alle kleuren

Alle Bootstrap-kleuren binne beskikber as Sass-fariabelen en in Sass-kaart yn scss/_variables.scssbestân. Om ferhege triemgrutte te foarkommen, meitsje wy gjin tekst- of eftergrûnkleurklassen foar elk fan dizze fariabelen. Ynstee kieze wy in subset fan dizze kleuren foar in temapalet .

Soargje derfoar dat jo kontrastferhâldingen kontrolearje as jo kleuren oanpasse. Lykas hjirûnder werjûn, hawwe wy trije kontrastferhâldingen tafoege oan elk fan 'e haadkleuren - ien foar de hjoeddeistige kleuren fan' e swatch, ien foar tsjin wyt, en ien foar tsjin swart.

$blau#0d6efd

$blau-100

$blau-200

$blau-300

$blau-400

$blau-500

$blau-600

$blau-700

$blau-800

$blau-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$poarper#6f42c1

$ pears-100

$ pears-200

$ pears-300

$ pears-400

$ pears-500

$ pears-600

$ pears-700

$ pears-800

$ pears-900

$roze#d63384

$roze-100

$roze-200

$roze-300

$roze-400

$roze-500

$roze-600

$roze-700

$roze-800

$roze-900

$red#dc3545

$read-100

$read-200

$read-300

$read-400

$ read-500

$ read-600

$read-700

$ read-800

$ read-900

$oranje#fd7e14

$oranje-100

$oranje-200

$oranje-300

$oranje-400

$oranje-500

$oranje-600

$oranje-700

$oranje-800

$oranje-900

$giel#ffc107

$giel-100

$giel-200

$giel-300

$giel-400

$giel-500

$giel-600

$giel-700

$giel-800

$giel-900

$grien#198754

$grien-100

$grien-200

$grien-300

$grien-400

$grien-500

$grien-600

$grien-700

$grien-800

$grien-900

$teal#20c997

$teal-100

$teal-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$ teal-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$griis-500#adb5bd

$griis-100

$griis-200

$griis-300

$griis-400

$griis-500

$griis-600

$griis-700

$griis-800

$griis-900

$swart#000

$wit#fff

Notysjes oer Sass

Sass kin net programmatysk fariabelen generearje, dus wy hawwe sels fariabelen makke foar elke tint en skaad. Wy spesifisearje de middelpuntwearde (bgl. $blue-500) en brûke oanpaste kleurfunksjes om ús kleuren te tint (ferljochtsje) of te skaadjen (tsjusterje) fia de kleurfunksje fan Sass mix().

It brûken mix()is net itselde as lighten()en darken()- de eardere kombinearret de opjûne kleur mei wyt of swart, wylst de lêste allinich de ljochtenswearde fan elke kleur oanpast. It resultaat is in folle mear folsleine suite fan kleuren, lykas werjûn yn dizze CodePen demo .

Us tint-color()en shade-color()funksjes brûke mix()neist ús $theme-color-intervalfariabele, dy't in stapte persintaazje wearde spesifisearret foar elke mingde kleur dy't wy produsearje. Sjoch de scss/_functions.scssen scss/_variables.scssbestannen foar de folsleine boarnekoade.

Kleur Sass kaarten

De boarne Sass-bestannen fan Bootstrap omfetsje trije kaarten om jo te helpen fluch en maklik oer in list mei kleuren en har hex-wearden te rinnen.

$colorslit al ús beskikbere basiskleuren ( 500).
$theme-colorslistet alle semantysk neamde temakleuren (hjirûnder werjûn)
$grayslist alle tinten en skaden fan griis

Binnen scss/_variables.scssfine jo Bootstrap's kleurfariabelen en Sass-kaart. Hjir is in foarbyld fan de $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
);

Wearden tafoegje, fuortsmite of wizigje binnen de kaart om te aktualisearjen hoe't se wurde brûkt yn in protte oare komponinten. Spitigernôch brûkt op dit stuit net elke komponint dizze Sass-kaart. Takomstige updates sille stribje om dit te ferbetterjen. Oant dan plan om gebrûk te meitsjen fan de ${color}fariabelen en dizze Sass-kaart.

Foarbyld

Hjir is hoe't jo dizze kinne brûke yn jo Sass:

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

Kleur- en eftergrûnhelpklassen binne ek beskikber foar it ynstellen coloren background-colorbrûken fan de 500kleurwearden.