Litur

Bootstrap er stutt af umfangsmiklu litakerfi sem sérhæfir stíla okkar og íhluti. Þetta gerir kleift að sérsníða og framlengja fyrir hvaða verkefni sem er.

Á þessari síðu

Þema litir

Við notum undirmengi allra lita til að búa til minni litavali til að búa til litasamsetningu, einnig fáanlegt sem Sass breytur og Sass kort í Bootstrap scss/_variables.scssskránni.

Aðal

Secondary

Árangur

Hætta

Viðvörun

Upplýsingar

Ljós

Myrkur

Allir þessir litir eru fáanlegir sem Sass kort, $theme-colors.

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

Skoðaðu Sass kortin og lykkjuskjölin okkar til að sjá hvernig á að breyta þessum litum.

Allir litir

Allir Bootstrap litir eru fáanlegir sem Sass breytur og Sass kort í scss/_variables.scssskrá. Til að forðast auknar skráarstærðir búum við ekki til texta- eða bakgrunnslitaflokka fyrir hverja af þessum breytum. Þess í stað veljum við undirmengi þessara lita fyrir þemapallettu .

Vertu viss um að fylgjast með birtuhlutföllum þegar þú sérsníða liti. Eins og sýnt er hér að neðan höfum við bætt þremur birtuhlutföllum við hvern af aðallitunum - einum fyrir núverandi liti sýnishornsins, einum fyrir á móti hvítum og einum fyrir á móti svörtu.

$blár#0d6efd

$ blár-100

$ blár-200

$ blár-300

$ blár-400

$ blár-500

$ blár-600

$ blár-700

$ blár-800

$ blár-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$fjólublár#6f42c1

$ fjólublátt-100

$ fjólublátt-200

$ fjólublátt-300

$ fjólublátt-400

$ fjólublátt-500

$ fjólublátt-600

$ fjólublátt-700

$ fjólublátt-800

$ fjólublátt-900

$bleikur#d63384

$ bleikur-100

$ bleikur-200

$ bleikur-300

$ bleikur-400

$ bleikur-500

$ bleikur-600

$ bleikur-700

$ bleikur-800

$ bleikur-900

$rauður#dc3545

$rauður-100

$rauður-200

$rauður-300

$ rauður-400

$ rauður-500

$ rauður-600

$ rauður-700

$ rauður-800

$ rautt-900

$appelsínugult#fd7e14

$appelsínugult-100

$appelsínugult-200

$ appelsínugult-300

$ appelsínugult-400

$ appelsínugult-500

$appelsínugult-600

$appelsínugult-700

$appelsínugult-800

$appelsínugult-900

$gulur#ffc107

$ gulur-100

$ gulur-200

$ gulur-300

$ gulur-400

$ gulur-500

$ gulur-600

$ gulur-700

$ gulur-800

$ gulur-900

$grænn#198754

$ grænt-100

$ grænt-200

$ grænn-300

$ grænt-400

$ grænn-500

$ grænt-600

$ grænt-700

$ grænt-800

$ grænn-900

$teal#20c997

$ teal-100

$ teal-200

$ teal-300

$ teal-400

$ teal-500

$ blár-600

$ teal-700

$ teal-800

$ blágrænt-900

$ cyan#0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$ grár-500#adb5bd

$ grár-100

$ grár-200

$ grár-300

$ grár-400

$ grár-500

$ grár-600

$ grár-700

$ grár-800

$ grár-900

$svartur#000

$hvítur#fff

Athugasemdir um Sass

Sass getur ekki búið til breytur með forritunaraðferðum, þannig að við bjuggum til breytur handvirkt fyrir hvern lit og litbrigði sjálf. Við tilgreinum miðpunktsgildið (td $blue-500) og notum sérsniðnar litaaðgerðir til að lita (ljósa) eða skyggja (myrkva) litina okkar í gegnum litaaðgerð Sass mix().

Notkun mix()er ekki það sama og lighten()og darken()— sá fyrrnefndi blandar tilgreindum lit með hvítum eða svörtum, en sá síðarnefndi stillir aðeins birtugildi hvers litar. Niðurstaðan er miklu fullkomnari litasvíta, eins og sýnt er í þessari CodePen kynningu .

Okkar tint-color()og shade-color()aðgerðir nota mix()samhliða $theme-color-intervalbreytunni okkar, sem tilgreinir þrepsett prósentugildi fyrir hvern blandaðan lit sem við framleiðum. Sjáðu scss/_functions.scssog scss/_variables.scssskrárnar fyrir allan frumkóðann.

Litur Sass kort

Uppruna Sass skrár Bootstrap innihalda þrjú kort til að hjálpa þér að hringja fljótt og auðveldlega yfir lista yfir liti og sexgildi þeirra.

$colorslistar alla tiltæka grunnliti okkar ( 500).
$theme-colorslistar alla merkingarlega nafngreinda þemaliti (sýnt hér að neðan)
$grayslistar alla lita og gráa tóna

Innan scss/_variables.scss, munt þú finna litabreytur Bootstrap og Sass kort. Hér er dæmi um $colorsSass kortið:

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

Bættu við, fjarlægðu eða breyttu gildum á kortinu til að uppfæra hvernig þau eru notuð í mörgum öðrum hlutum. Því miður á þessum tíma nota ekki allir hlutir þetta Sass kort. Framtíðaruppfærslur munu leitast við að bæta úr þessu. Þangað til þá skaltu íhuga að nýta þér ${color}breyturnar og þetta Sass kort.

Dæmi

Svona geturðu notað þetta í Sass þínum:

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

Lita- og bakgrunnsgagnaflokkar eru einnig fáanlegir til að stilla colorog background-colornota 500litagildin.