Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához

A Bootstrap-et egy kiterjedt színrendszer támogatja, amely stílusainkat és összetevőinket tematizálja. Ez lehetővé teszi bármely projekt átfogóbb testreszabását és bővítését.

Téma színei

Az összes szín egy részhalmazát használjuk, hogy létrehozzunk egy kisebb színpalettát a színsémák létrehozásához, amelyek Sass változókként és Sass térképként is elérhetők a Bootstrap scss/_variables.scssfájljában.

Elsődleges
Másodlagos
Siker
Veszély
Figyelem
Info
Könnyű
Sötét

Mindezek a színek Sass térképként, $theme-colors.

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

Tekintse meg Sass térképeket és hurkokat tartalmazó dokumentumainkat , hogy hogyan módosíthatja ezeket a színeket.

Minden szín

Az összes Bootstrap szín elérhető Sass változóként és Sass térképként scss/_variables.scssfájlban. A megnövekedett fájlméret elkerülése érdekében nem hozunk létre szöveg- vagy háttérszínosztályokat ezekhez a változókhoz. Ehelyett ezeknek a színeknek egy részhalmazát választjuk ki a témapalettákhoz .

A színek testreszabásakor ügyeljen a kontrasztarányokra. Az alábbiak szerint három kontrasztarányt adtunk minden fő színhez – egyet a minta jelenlegi színeihez, egyet a fehérhez és egyet a feketéhez.

$kék#0d6efd
kék-100 dollár
kék - 200 dollár
kék - 300 dollár
kék-400 dollár
kék-500 dollár
kék-600 dollár
kék-700 dollár
kék-800 dollár
kék-900 dollár
$indigo#6610f2
indigó-100 dollár
indigó-200 dollár
Indigo-300 dollár
indigó-400 dollár
Indigo-500 dollár
indigó-600 dollár
indigó-700 dollár
Indigo-800 dollár
indigó-900 dollár
$lila#6f42c1
lila-100 dollár
lila-200 dollár
lila-300 dollár
lila-400 dollár
lila-500 dollár
lila-600 dollár
lila-700 dollár
lila-800 dollár
lila-900 dollár
$rózsaszín#d63384
rózsaszín-100 dollár
rózsaszín-200 dollár
rózsaszín-300 dollár
rózsaszín-400 dollár
rózsaszín-500 dollár
rózsaszín-600 dollár
rózsaszín-700 dollár
rózsaszín-800 dollár
rózsaszín-900 dollár
$piros#dc3545
piros-100 dollár
piros-200 dollár
piros-300 dollár
piros-400 dollár
piros-500 dollár
piros-600 dollár
piros-700 dollár
piros-800 dollár
piros-900 dollár
$narancs#fd7e14
narancs-100 dollár
narancs-200 dollár
narancs-300 dollár
narancs-400 dollár
narancs-500 dollár
narancs-600 dollár
narancs-700 dollár
narancs-800 dollár
narancs-900 dollár
$sárga#ffc107
$sárga-100
sárga-200 dollár
sárga-300 dollár
sárga-400 dollár
sárga-500 dollár
sárga-600 dollár
sárga-700 dollár
sárga-800 dollár
sárga-900 dollár
$zöld#198754
zöld-100 dollár
zöld-200 dollár
zöld-300 dollár
zöld-400 dollár
zöld-500 dollár
zöld-600 dollár
zöld-700 dollár
zöld-800 dollár
zöld-900 dollár
$kék kékeszöld#20c997
kékeszöld-100 dollár
kékeszöld-200 dollár
kékeszöld-300 dollár
kékeszöld-400 dollár
kékeszöld-500 dollár
kékeszöld-600 dollár
kékeszöld-700 dollár
kékeszöld-800 dollár
kékeszöld-900 dollár
$cián#0dcaf0
cián-100 dollár
cián-200 dollár
cián-300 dollár
cián-400 dollár
cián-500 dollár
cián-600 dollár
cián-700 dollár
cián-800 dollár
cián-900 dollár
szürke-500 dollár#adb5bd
szürke-100 dollár
szürke-200 dollár
szürke-300 dollár
szürke-400 dollár
szürke-500 dollár
szürke-600 dollár
szürke-700 dollár
szürke-800 dollár
szürke-900 dollár
$fekete#000
$fehér#fff

Megjegyzések Sassról

A Sass nem tud programozottan változókat generálni, ezért saját kezűleg hoztunk létre változókat minden árnyalathoz és árnyalathoz. Megadjuk a középpont értékét (pl. $blue-500), és egyedi színfüggvényekkel színezzük (világosítjuk) vagy árnyékoljuk (sötétítjük) a színeinket a Sass színfunkcióján keresztül mix().

A használat mix()nem ugyanaz, mint lighten()és darken()– az előbbi a megadott színt fehérrel vagy feketével keveri, míg az utóbbi csak az egyes színek világosságát állítja be. Az eredmény egy sokkal teljesebb színkészlet, amint azt ez a CodePen bemutató is mutatja .

A mi tint-color()és a shade-color()függvényeink mix()a változónkkal együtt használják $theme-color-interval, amely lépcsőzetes százalékos értéket ad meg minden egyes előállított kevert színhez. Tekintse meg a scss/_functions.scssés scss/_variables.scssfájlokat a teljes forráskódért.

Színes Sass térképek

A Bootstrap Sass forrásfájljai három térképet tartalmaznak, amelyek segítségével gyorsan és egyszerűen áttekintheti a színek listáját és hexadecimális értékeit.

  • $colorsfelsorolja az összes elérhető alapszínünket ( 500).
  • $theme-colorsfelsorolja az összes szemantikailag elnevezett témaszínt (lent látható)
  • $graysfelsorolja a szürke összes árnyalatát és árnyalatát

Ezen belül scss/_variables.scssmegtalálja a Bootstrap színváltozóit és a Sass térképet. Íme egy példa a $colorsSass térképre:

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

Adjon hozzá, távolítson el vagy módosítson értékeket a térképen, hogy frissítse azok felhasználási módját sok más összetevőben. Sajnos jelenleg nem minden összetevő használja ezt a Sass térképet. A jövőbeli frissítések ezen javítani fognak. Addig is tervezze a ${color}változók és a Sass térkép felhasználását.

Példa

A következőképpen használhatja ezeket a Sass-ban:

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

Szín- és háttérhasználati osztályok is rendelkezésre állnak a színértékek beállításához colorés background-colorhasználatához .500

Közművek előállítása

Hozzáadva a v5.1.0-hoz

A Bootstrap nem tartalmaz colorés background-colorsegédprogramokat minden színváltozóhoz, de ezeket saját maga is létrehozhatja a segédprogram API -val és a v5.1.0-s verzióban hozzáadott kiterjesztett Sass térképeinkkel.

  1. Kezdésként győződjön meg arról, hogy importálta a függvényeinket, változóinkat, mixeinket és segédprogramjainkat.
  2. Funkciónkkal map-merge-multiple()gyorsan egyesíthet több Sass térképet egy új térképen.
  3. Egyesítse ezt az új kombinált térképet, hogy bármely segédprogramot {color}-{level}osztálynévvel bővítsen.

Íme egy példa, amely szövegszín segédprogramokat (pl. .text-purple-500) hoz létre a fenti lépések segítségével.

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

.text-{color}-{level}Ez minden színhez és szinthez új segédprogramokat generál . Ugyanezt megteheti bármely más közművel és ingatlannal is.