Mine põhisisu juurde Jätke dokumentide navigeerimise juurde

Bootstrapi toetab ulatuslik värvisüsteem, mis kujundab meie stiilid ja komponendid. See võimaldab iga projekti jaoks põhjalikumat kohandamist ja laiendamist.

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.

Esmane
Teisene
Edu
Oht
Hoiatus
Info
Valgus
Tume

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 teise musta värvi jaoks.

$sinine#0d6efd
sinine - 100 dollarit
sinine - 200 dollarit
sinine - 300 dollarit
sinine - 400 dollarit
sinine - 500 dollarit
sinine - 600 dollarit
sinine - 700 dollarit
sinine - 800 dollarit
sinine - 900 dollarit
$indigo#6610f2
Indigo-100 dollarit
indigo-200 dollarit
indigo-300 dollarit
indigo-400 dollarit
indigo-500 dollarit
indigo-600 dollarit
indigo-700 dollarit
indigo-800 dollarit
indigo-900 dollarit
$lilla# 6f42c1
lilla - 100 dollarit
lilla - 200 dollarit
lilla - 300 dollarit
lilla - 400 dollarit
lilla - 500 dollarit
lilla - 600 dollarit
lilla - 700 dollarit
lilla - 800 dollarit
lilla - 900 dollarit
$ roosa#d63384
roosa - 100 dollarit
roosa - 200 dollarit
roosa - 300 dollarit
roosa - 400 dollarit
roosa - 500 dollarit
roosa - 600 dollarit
roosa - 700 dollarit
roosa - 800 dollarit
roosa - 900 dollarit
$punane#dc3545
punane - 100 dollarit
punane - 200 dollarit
punane - 300 dollarit
punane - 400 dollarit
punane - 500 dollarit
punane - 600 dollarit
punane - 700 dollarit
punane - 800 dollarit
punane - 900 dollarit
$oranž#fd7e14
oranž - 100 dollarit
oranž - 200 dollarit
oranž - 300 dollarit
oranž - 400 dollarit
oranž - 500 dollarit
oranž - 600 dollarit
oranž - 700 dollarit
oranž - 800 dollarit
oranž - 900 dollarit
$kollane#ffc107
kollane - 100 dollarit
kollane - 200 dollarit
kollane - 300 dollarit
kollane - 400 dollarit
kollane - 500 dollarit
kollane - 600 dollarit
kollane - 700 dollarit
kollane - 800 dollarit
kollane - 900 dollarit
$roheline#198754
roheline-100 dollarit
roheline-200 dollarit
roheline-300 dollarit
roheline-400 dollarit
roheline-500 dollarit
roheline-600 dollarit
roheline-700 dollarit
roheline-800 dollarit
roheline-900 dollarit
$sinine#20c997
sinakas-100 dollarit
sinakas-200 dollarit
sinakas-300 dollarit
sinakas-400 dollarit
sinakas-500 dollarit
sinakas-600 dollarit
sinakas-700 dollarit
sinakas-800 dollarit
sinakas-900 dollarit
$tsüaan#0dcaf0
tsüaan-100 dollarit
tsüaan-200 dollarit
tsüaan-300 dollarit
tsüaan-400 dollarit
tsüaan-500 dollarit
tsüaan-600 dollarit
tsüaan-700 dollarit
tsüaan-800 dollarit
tsüaan-900 dollarit
hall - 500 dollarit#adb5bd
hall - 100 dollarit
hall - 200 dollarit
hall - 300 dollarit
hall - 400 dollarit
hall - 500 dollarit
hall - 600 dollarit
hall - 700 dollarit
hall - 800 dollarit
hall - 900 dollarit
$must#000
$valge#fff

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,
  "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

Lisatud versioonis v5.1.0

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/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.