Värv

Teema värvid

Väiksema värvipaleti loomiseks värviskeemide loomiseks kasutame kõigi värvide alamhulka, mis on saadaval ka Sassi muutujatena ja Sassi kaardina Bootstrapi scss/_variables.scssfailis.

Kõik need värvid on saadaval Sassi kaardina, $theme-colors.

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

Nende värvide muutmise kohta vaadake meie Sassi kaartide ja silmuste dokumente .

Kõik värvid

Kõik Bootstrapi värvid on saadaval Sassi muutujatena ja scss/_variables.scssfailis Sassi kaardina. Failisuuruse suurenemise vältimiseks ei loo me nende muutujate jaoks teksti- ega taustavärviklasse. Selle asemel valime teemapaleti jaoks nende värvide alamhulga .

Värvide kohandamisel jälgige kindlasti kontrastsuse suhet. Nagu allpool näidatud, oleme lisanud igale põhivärvile kolm kontrastsuse suhet – ühe prooviproovi praeguste värvide jaoks, ühe valge ja ühe musta värvi jaoks.

Märkused Sassi kohta

Sass ei saa programmiliselt muutujaid genereerida, seega lõime ise muutujad iga tooni ja tooni jaoks käsitsi. Täpsustame keskpunkti väärtuse (nt $blue-500) ja kasutame kohandatud värvifunktsioone oma värvide toonimiseks (heledamaks) või varjutamiseks (tumendamiseks) Sassi värvifunktsiooni kaudu mix().

Kasutamine mix()ei ole sama, mis lighten()ja darken()– esimene segab määratud värvi valge või mustaga, teine ​​aga reguleerib ainult iga värvi heleduse väärtust. Tulemuseks on palju täiuslikum värvide komplekt, nagu on näidatud selles CodePeni demos .

Meie tint-color()ja shade-color()funktsioonid kasutavad mix()kõrvuti meie $theme-color-intervalmuutujaga, mis määrab iga meie toodetava segavärvi jaoks astmelise protsendiväärtuse. Täieliku lähtekoodi leiate failidest scss/_functions.scssja .scss/_variables.scss

Värvilised Sassi kaardid

Bootstrapi Sassi lähtefailid sisaldavad kolme kaarti, mis aitavad teil kiiresti ja hõlpsalt värvide loendi ja nende kuueteistkümnendväärtuste üle vaadata.

• $colorsloetleb kõik meie saadaolevad 500põhivärvid ( ).
• $theme-colorsloetleb kõik semantiliselt nimetatud teemavärvid (näidatud allpool)
• $graysloetleb kõik halli toonid ja toonid

Seest scss/_variables.scssleiate Bootstrapi värvimuutujad ja Sassi kaardi. Siin on näide $colorsSassi kaardist:

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

Lisage, eemaldage või muutke kaardil väärtusi, et värskendada nende kasutamist paljudes teistes komponentides. Kahjuks ei kasuta praegu kõik komponendid seda Sassi kaarti. Tulevased värskendused püüavad seda parandada. Kuni selle ajani ${color}plaanige muutujaid ja seda Sassi kaarti kasutada.

Näide

Saate neid oma Sassis kasutada järgmiselt.

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

Värviväärtustecolor seadistamiseks ja background-colorkasutamiseks on saadaval ka värvi- ja taustautiliidiklassid500 .

Kommunaalteenuste genereerimine

Bootstrap ei sisalda iga värvimuutuja colorjaoks background-colorutiliite, kuid saate need ise luua meie utiliidi API ja meie laiendatud Sassi kaartidega, mis on lisatud versioonile 5.1.0.

1. Alustuseks veenduge, et oleksite importinud meie funktsioonid, muutujad, mikserid ja utiliidid.
2. Kasutage meie map-merge-multiple()funktsiooni mitme Sassi kaardi kiireks liitmiseks uueks kaardiks.
3. Ühendage see uus kombineeritud kaart, et laiendada mis tahes utiliiti {color}-{level}klassi nimega.

.text-purple-500Siin on näide, mis loob ülaltoodud samme kasutades tekstivärvi utiliite (nt ).

@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";

See loob uusi .text-{color}-{level}utiliite iga värvi ja taseme jaoks. Sama saate teha ka mis tahes muu kommunaalteenuse ja kinnisvara puhul.