Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch

Bootstrap je podporovaný rozsiahlym systémom farieb, ktorý tematizuje naše štýly a komponenty. To umožňuje komplexnejšie prispôsobenie a rozšírenie pre akýkoľvek projekt.

Farby motívu

Používame podmnožinu všetkých farieb na vytvorenie menšej farebnej palety na generovanie farebných schém, ktoré sú dostupné aj ako premenné Sass a mapa Sass v scss/_variables.scsssúbore Bootstrap.

Primárny
Sekundárne
Úspech
Nebezpečenstvo
POZOR
Info
Svetlo
Tmavý

Všetky tieto farby sú dostupné ako mapa Sass, $theme-colors.

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

Pozrite si naše dokumenty o mapách a slučkách Sass , kde nájdete informácie o tom, ako upraviť tieto farby.

Všetky farby

Všetky farby Bootstrapu sú dostupné ako premenné Sass a mapa Sass v scss/_variables.scsssúbore. Aby sme sa vyhli zväčšeniu veľkosti súborov, nevytvárame triedy farieb textu alebo pozadia pre každú z týchto premenných. Namiesto toho vyberieme podmnožinu týchto farieb pre paletu tém .

Pri prispôsobovaní farieb nezabudnite sledovať kontrastné pomery. Ako je uvedené nižšie, ku každej z hlavných farieb sme pridali tri kontrastné pomery – jeden pre aktuálne farby vzorky, jeden pre bielu a jeden pre čiernu.

$modrá#0d6efd
modrá - 100 dolárov
modrá - 200 dolárov
modrá - 300 dolárov
modrá - 400 dolárov
modrá - 500 dolárov
modrá - 600 dolárov
modrá - 700 dolárov
modrá - 800 dolárov
modrá - 900 dolárov
$indigo#6610f2
indigo-100 $
indigo-200 dolárov
indigo - 300 dolárov
indigo - 400 dolárov
indigo - 500 dolárov
indigo - 600 dolárov
indigo - 700 dolárov
indigo - 800 dolárov
indigo - 900 dolárov
$fialová#6f42c1
fialová - 100 dolárov
fialová - 200 dolárov
fialová - 300 dolárov
fialová - 400 dolárov
fialová - 500 dolárov
fialová - 600 dolárov
fialová - 700 dolárov
fialová - 800 dolárov
fialová - 900 dolárov
$ružová#d63384
ružová - 100 dolárov
ružové - 200 dolárov
ružové - 300 dolárov
ružové - 400 dolárov
ružová - 500 dolárov
ružové - 600 dolárov
ružové - 700 dolárov
ružové - 800 dolárov
ružová - 900 dolárov
$red#dc3545
červená - 100 dolárov
červená - 200 dolárov
červená - 300 dolárov
červená - 400 dolárov
červená - 500 dolárov
červená - 600 dolárov
červená - 700 dolárov
červená - 800 dolárov
červená - 900 dolárov
$oranžová#fd7e14
oranžová - 100 dolárov
oranžová - 200 dolárov
oranžová - 300 dolárov
oranžová - 400 dolárov
oranžová - 500 dolárov
oranžová - 600 dolárov
oranžová - 700 dolárov
oranžová - 800 dolárov
oranžová - 900 dolárov
$žltá#ffc107
žltá - 100 dolárov
žltá - 200 dolárov
žltá - 300 dolárov
žltá - 400 dolárov
žltá - 500 dolárov
žltá - 600 dolárov
žltá - 700 dolárov
žltá - 800 dolárov
žltá - 900 dolárov
$zelená#198754
zelená - 100 dolárov
zelená - 200 dolárov
zelená - 300 dolárov
zelená - 400 dolárov
zelená - 500 dolárov
zelená - 600 dolárov
zelená - 700 dolárov
zelená - 800 dolárov
zelená - 900 dolárov
$teal#20c997
zeleno-100 dolárov
zeleno-200 dolárov
modrozelená - 300 dolárov
zeleno-400 dolárov
zeleno-500 dolárov
zeleno-600 dolárov
modrozelená - 700 dolárov
modrozelená - 800 dolárov
modrozelená - 900 dolárov
$ azúrová#0dcaf0
Azúrová - 100 USD
Azúrová - 200 USD
Azúrová - 300 USD
Azúrová - 400 USD
Azúrová - 500 USD
Azúrová - 600 USD
Azúrová - 700 USD
Azúrová - 800 USD
Azúrová - 900 USD
šedá - 500 dolárov#adb5bd
šedá - 100 dolárov
šedá - 200 dolárov
šedá - 300 dolárov
šedá - 400 dolárov
šedá - 500 dolárov
šedá - 600 dolárov
šedá - 700 dolárov
šedá - 800 dolárov
šedá - 900 dolárov
$čierna#000
$biela#fff

Poznámky k Sassovi

Sass nemôže programovo generovať premenné, takže sme manuálne vytvorili premenné pre každý odtieň a odtieň sami. Špecifikujeme strednú hodnotu (napr. $blue-500) a používame vlastné farebné funkcie na tónovanie (zosvetlenie) alebo tieňovanie (stmavenie) našich farieb prostredníctvom mix()funkcie farieb Sass.

Použitie mix()nie je rovnaké ako lighten()a darken()— prvý spôsob zmieša určenú farbu s bielou alebo čiernou, zatiaľ čo druhý iba upraví hodnotu svetlosti každej farby. Výsledkom je oveľa kompletnejšia sada farieb, ako je znázornené v tejto ukážke CodePen .

Naše tint-color()a shade-color()funkcie sa používajú mix()spolu s našou $theme-color-intervalpremennou, ktorá špecifikuje stupňovitú percentuálnu hodnotu pre každú zmiešanú farbu, ktorú vyrábame. Úplný zdrojový kód nájdete v súboroch scss/_functions.scssa .scss/_variables.scss

Farebné mapy Sass

Zdrojové súbory Sass Bootstrapu obsahujú tri mapy, ktoré vám pomôžu rýchlo a jednoducho prechádzať zoznamom farieb a ich hexadecimálnych hodnôt.

  • $colorsuvádza všetky naše dostupné základné ( 500) farby
  • $theme-colorsuvádza všetky sémanticky pomenované farby tém (uvedené nižšie)
  • $graysuvádza všetky odtiene a odtiene sivej

V rámci scss/_variables.scss, nájdete farebné premenné Bootstrapu a mapu Sass. Tu je príklad $colorsmapy Sass:

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

Pridajte, odstráňte alebo upravte hodnoty v rámci mapy, aby ste aktualizovali spôsob, akým sa používajú v mnohých iných komponentoch. Bohužiaľ v súčasnosti nie každý komponent využíva túto mapu Sass. Budúce aktualizácie sa budú snažiť toto vylepšiť. Dovtedy plánujte využívať ${color}premenné a túto mapu Sass.

Príklad

Tu je návod, ako ich môžete použiť vo svojom Sass:

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

Na nastavenie a používanie hodnôt farieb sú k dispozícii aj triedy nástrojov farieb a pozadia .colorbackground-color500