barva

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.

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.

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,
  "black":      $black,
  "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

Ustvarjanje pripomočkov

Bootstrap ne vključuje pripomočkov colorza background-colorvsako barvno spremenljivko, vendar jih lahko ustvarite sami z našim API-jem za pripomočke in našimi razširjenimi zemljevidi Sass, dodanimi v različici 5.1.0.

1. Za začetek se prepričajte, da ste uvozili naše funkcije, spremenljivke, miksine in pripomočke.
2. Uporabite našo map-merge-multiple()funkcijo za hitro združitev več zemljevidov Sass v nov zemljevid.
3. Združite ta novi kombinirani zemljevid, da razširite kateri koli pripomoček z {color}-{level}imenom razreda.

Tukaj je primer, ki generira pripomočke za barvo besedila (npr. .text-purple-500) z uporabo zgornjih korakov.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

To bo ustvarilo nove .text-{color}-{level}pripomočke za vsako barvo in raven. Enako lahko storite tudi za vse druge pripomočke in nepremičnine.