Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Spalva

„Bootstrap“ palaiko plati spalvų sistema, kuri atitinka mūsų stilius ir komponentus. Tai leidžia išsamiau pritaikyti ir išplėsti bet kurį projektą.

Temos spalvos

Naudojame visų spalvų poaibį, kad sukurtume mažesnę spalvų paletę spalvų schemoms generuoti, taip pat kaip Sass kintamieji ir Sass žemėlapis Bootstrap scss/_variables.scssfaile.

Pirminis
Antrinis
Sėkmė
Pavojus
Įspėjimas
Informacija
Šviesa
Tamsus

Visos šios spalvos galimos kaip Sass žemėlapis, $theme-colors.

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

Peržiūrėkite mūsų Sass žemėlapių ir kilpų dokumentus , kaip pakeisti šias spalvas.

Visos spalvos

Visos Bootstrap spalvos galimos kaip Sass kintamieji ir Sass žemėlapis scss/_variables.scssfaile. Kad nepadidėtų failų dydžiai, nekuriame teksto ar fono spalvų klasių kiekvienam iš šių kintamųjų. Vietoj to mes pasirenkame šių spalvų poaibį temos paletei .

Tinkindami spalvas būtinai stebėkite kontrasto santykį. Kaip parodyta toliau, kiekvienai iš pagrindinių spalvų pridėjome tris kontrasto santykius – vieną – esamoms pavyzdžio spalvoms, vieną – prieš baltą ir kitą – prieš juodą.

$ mėlyna#0d6efd
Mėlyna - 100 USD
Mėlyna - 200 USD
Mėlyna - 300 USD
Mėlyna - 400 USD
Mėlyna - 500 USD
Mėlyna - 600 USD
Mėlyna - 700 USD
Mėlyna – 800 USD
Mėlyna – 900 USD
$indigo#6610f2
Indigo - 100 USD
Indigo - 200 USD
Indigo - 300 USD
Indigo - 400 USD
Indigo - 500 USD
Indigo - 600 USD
Indigo - 700 USD
Indigo - 800 USD
Indigo - 900 USD
$ violetinė#6f42c1
violetinė - 100 USD
violetinė - 200 USD
violetinė - 300 USD
violetinė - 400 USD
violetinė - 500 USD
violetinė - 600 USD
violetinė - 700 USD
violetinė - 800 USD
violetinė - 900 USD
$ rožinė#d63384
rožinė - 100 USD
rožinė - 200 USD
rožinė - 300 USD
rožinė - 400 USD
rožinė - 500 USD
rožinė - 600 USD
rožinė - 700 USD
rožinė - 800 USD
rožinė - 900 USD
$ raudona#dc3545
raudona - 100 USD
raudona - 200 USD
raudona - 300 USD
raudona - 400 USD
raudona - 500 USD
raudona - 600 USD
raudona - 700 USD
raudona - 800 USD
raudona - 900 USD
$oranžinė#fd7e14
oranžinė - 100 USD
oranžinė - 200 USD
Oranžinė - 300 USD
Oranžinė - 400 USD
oranžinė - 500 USD
oranžinė - 600 USD
oranžinė - 700 USD
oranžinė - 800 USD
oranžinė - 900 USD
$geltona#ffc107
Geltona - 100 USD
Geltona - 200 USD
geltona - 300 USD
geltona - 400 USD
geltona - 500 USD
geltona - 600 USD
geltona - 700 USD
geltona - 800 USD
geltona - 900 USD
$ žalias#198754
žalia - 100 USD
$ žalia - 200
žalia - 300 USD
žalia - 400 USD
žalia - 500 USD
$ žalia - 600
žalia - 700 USD
žalia - 800 USD
žalia - 900 USD
$teal#20c997
žalsvai mėlyna - 100 USD
žalsvai mėlyna - 200 USD
žalsvai mėlyna - 300 USD
žalsvai mėlyna - 400 USD
žalsvai mėlyna - 500 USD
žalsvai mėlyna - 600 USD
žalsvai mėlyna - 700 USD
žalsvai mėlyna - 800 USD
žalsvai mėlyna - 900 USD
$ žydra#0dcaf0
žydros spalvos – 100 USD
žydros spalvos – 200 USD
žydros spalvos – 300 USD
žydros spalvos - 400 USD
žydros spalvos – 500 USD
žydros spalvos - 600 USD
žydros spalvos – 700 USD
žydros spalvos – 800 USD
žydra – 900 USD
pilka - 500 USD#adb5bd
pilka - 100 USD
pilka - 200 USD
pilka - 300 USD
pilka - 400 USD
pilka - 500 USD
pilka - 600 USD
pilka - 700 USD
Pilka – 800 USD
pilka - 900 USD
$juodas#000
$baltas#fff

Pastabos apie Sasą

Sass negali programiškai generuoti kintamųjų, todėl kiekvienam atspalviui ir atspalviui kintamuosius sukūrėme patys. Mes nurodome vidurio taško reikšmę (pvz., $blue-500) ir naudojame pasirinktines spalvų funkcijas, kad atspalvintume (šviesintume) arba atspalvintume (tamsintume) savo spalvas per Sass mix()spalvų funkciją.

Naudojimas mix()nėra tas pats, kas lighten()ir darken()– pirmasis sulieja nurodytą spalvą su balta arba juoda, o antroji tik koreguoja kiekvienos spalvos šviesumo reikšmę. Rezultatas yra daug išsamesnis spalvų rinkinys, kaip parodyta šioje CodePen demonstracijoje .

Mūsų tint-color()ir shade-color()funkcijos naudojamos mix()kartu su mūsų $theme-color-intervalkintamuoju, kuris nurodo kiekvienos mūsų gaminamos mišrios spalvos procentinę reikšmę. Visą šaltinio kodą rasite scss/_functions.scssir failuose.scss/_variables.scss

Spalvoti Sass žemėlapiai

„Bootstrap“ šaltinio „Sass“ failuose yra trys žemėlapiai, kurie padės greitai ir lengvai peržiūrėti spalvų sąrašą ir jų šešioliktaines reikšmes.

  • $colorspateikiamos visos mūsų turimos bazinės ( 500) spalvos
  • $theme-colorspateikiamos visos semantiškai pavadintos temos spalvos (parodyta žemiau)
  • $grayspateikiami visi pilkos spalvos atspalviai ir atspalviai

scss/_variables.scssSvetainėje rasite „Bootstrap“ spalvų kintamuosius ir „Sass“ žemėlapį . $colorsŠtai Sass žemėlapio pavyzdys :

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

Pridėkite, pašalinkite arba keiskite reikšmes žemėlapyje, kad atnaujintumėte, kaip jos naudojamos daugelyje kitų komponentų. Deja, šiuo metu ne kiekvienas komponentas naudoja šį Sass žemėlapį. Būsimi atnaujinimai stengsis tai pagerinti. Iki tol planuokite naudotis ${color}kintamaisiais ir šiuo Sass žemėlapiu.

Pavyzdys

Štai kaip galite juos naudoti savo „Sass“:

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

Taip pat galimos spalvų ir fonocolor naudingumo klasės, leidžiančios nustatyti ir background-colornaudoti 500spalvų reikšmes.

Komunalinių paslaugų generavimas

Pridėta 5.1.0 versijoje

„Bootstrap“ neapima colorkiekvieno background-colorspalvų kintamojo paslaugų, tačiau galite jas sugeneruoti patys naudodami mūsų paslaugų API ir išplėstinius „Sass“ žemėlapius, pridėtus 5.1.0 versijoje.

  1. Norėdami pradėti, įsitikinkite, kad importavote mūsų funkcijas, kintamuosius, derinius ir komunalines paslaugas.
  2. Naudokite mūsų map-merge-multiple()funkciją, kad greitai sujungtumėte kelis Sass žemėlapius į naują žemėlapį.
  3. Sujunkite šį naują kombinuotą žemėlapį, kad išplėstumėte bet kokią priemonę {color}-{level}klasės pavadinimu.

Pateikiame pavyzdį, kuris generuoja teksto spalvų priemones (pvz., .text-purple-500) atlikdamas aukščiau nurodytus veiksmus.

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

Tai sukurs naujų .text-{color}-{level}paslaugų kiekvienai spalvai ir lygiui. Tą patį galite padaryti ir bet kokiam kitam komunaliniam naudojimui ir nuosavybei.