in English

barva

Bootstrap podpira obsežen barvni sistem, ki tematizira naše sloge in komponente. To omogoča bolj celovito prilagoditev in razširitev za kateri koli projekt.

Na tej strani

Tematske barve

Uporabljamo podnabor vseh barv za ustvarjanje manjše barvne palete za generiranje barvnih shem, ki je na voljo tudi kot spremenljivke Sass in zemljevid Sass v scss/_variables.scssdatoteki Bootstrap.

Primarni

Sekundarno

Uspeh

Nevarnost

Opozorilo

Informacije

Svetloba

Temno

Vse te barve so na voljo kot zemljevid Sass, $theme-colors.

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

Oglejte si naše zemljevide Sass in dokumente o zankah , kako spremeniti te barve.

Vse barve

Vse barve Bootstrap so na voljo kot spremenljivke Sass in zemljevid Sass v scss/_variables.scssdatoteki. Da bi se izognili povečanju velikosti datotek, ne ustvarjamo razredov barv besedila ali ozadja za vsako od teh spremenljivk. Namesto tega izberemo podnabor teh barv za tematsko paleto .

Pri prilagajanju barv obvezno spremljajte kontrastna razmerja. Kot je prikazano spodaj, smo vsaki od glavnih barv dodali tri kontrastna razmerja – eno za trenutne barve vzorca, eno proti beli in eno proti črni.

$modra#0d6efd

$modra-100

$modra-200

$ modra-300

$modra-400

$modra-500

$ modra-600

modra-700 $

$modra-800

$ modra-900

$indigo#6610f2

$indigo-100

$ indigo-200

$indigo-300

indigo-400 $

indigo-500 $

indigo-600 $

indigo-700 $

indigo-800 $

indigo-900 $

$vijolična#6f42c1

vijolična-100 $

vijolična-200 $

vijolična $300

vijolična $400

vijolična $500

vijolična $600

vijolična $700

vijolična $800

vijolična-900 $

$roza#d63384

roza $100

roza $200

roza-300 $

roza-400 $

roza-500 $

roza-600 $

roza-700 $

roza-800 $

roza-900 $

$rdeča#dc3545

$rdeča-100

rdeča - 200 $

rdeča - 300 $

rdeča - 400 $

rdeča-500 dolarjev

rdeča-600 dolarjev

rdeča-700 dolarjev

rdeča - 800 $

rdeče-900 dolarjev

$oranžna#fd7e14

pomaranča-100 $

pomaranča-200 $

pomaranča-300 $

pomaranča - 400 $

pomaranča-500 $

pomaranča-600 $

pomaranča-700 $

pomaranča-800 $

pomaranča-900 $

$rumena#ffc107

$rumena-100

$rumena-200

$rumena-300

$rumena-400

$rumena-500

rumena-600 $

rumena-700 $

rumena-800 $

rumeno-900 $

$zelena#198754

$zelenih-100

zelenih $200

zelenih $300

zelenih $400

zelenih $500

zelenih $600

zelenih 700 $

zelenih $800

zelenih 900 $

$teal#20c997

teal-100 $

Teal-200 $

Teal-300 $

Teal-400 $

Teal-500 $

Teal-600 $

Teal-700 $

Teal-800 $

Teal-900 $

$cyan#0dcaf0

cian-100 $

$cyan-200

cian-300 dolarjev

cian-400 dolarjev

cian-500 $

cian-600 $

cian-700 dolarjev

cian-800 $

cian-900 $

sivo-500 $#adb5bd

sivo-100 $

$siva-200

sivo-300 $

sivo-400 $

sivo-500 $

sivo-600 $

sivo-700 $

sivo-800 $

siva-900 $

$črna#000

$bela#fff

Opombe o Sass

Sass ne more programsko generirati spremenljivk, zato smo sami ročno ustvarili spremenljivke za vsak ton in odtenek. Določimo srednjo vrednost (npr. $blue-500) in uporabimo barvne funkcije po meri za niansiranje (posvetlitev) ali senčenje (zatemnitev) naših barv prek Sassove mix()barvne funkcije.

Uporaba mix()ni enaka kot lighten()in darken()—prvi zmeša določeno barvo z belo ali črno, medtem ko slednji samo prilagodi vrednost svetlosti vsake barve. Rezultat je veliko bolj popolna zbirka barv, kot je prikazano v tej predstavitvi CodePen .

Funkcije Our tint-color()in shade-color()uporabljajo mix()skupaj z našo $theme-color-intervalspremenljivko, ki določa stopničasto odstotno vrednost za vsako mešano barvo, ki jo izdelamo. Oglejte si scss/_functions.scssdatoteke in scss/_variables.scssza celotno izvorno kodo.

Barvne karte Sass

Bootstrapove izvorne datoteke Sass vključujejo tri zemljevide, ki vam pomagajo hitro in preprosto pregledati seznam barv in njihovih šestnajstiških vrednosti.

$colorsnavaja vse naše razpoložljive osnovne ( 500) barve
$theme-colorsnavede vse semantično poimenovane barve tem (prikazano spodaj)
$graysnavaja vse tone in odtenke sive

Znotraj scss/_variables.scssboste našli Bootstrapove barvne spremenljivke in zemljevid Sass. Tukaj je primer $colorszemljevida Sass:

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

Dodajte, odstranite ali spremenite vrednosti znotraj zemljevida, da posodobite, kako se uporabljajo v številnih drugih komponentah. Na žalost trenutno ne uporablja vsaka komponenta tega zemljevida Sass. Prihodnje posodobitve si bodo prizadevale to izboljšati. Do takrat načrtujte uporabo ${color}spremenljivk in tega zemljevida Sass.

Primer

Tukaj je opisano, kako jih lahko uporabite v svojem Sassu:

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

Za nastavitev in uporabo barvnih vrednosti so na voljo tudi uporabni razredi barv in ozadij .colorbackground-color500