Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima

Bootstrap je podržan opsežnim sustavom boja koji tematizira naše stilove i komponente. To omogućuje sveobuhvatniju prilagodbu i proširenje za svaki projekt.

Tematske boje

Koristimo podskup svih boja za stvaranje manje palete boja za generiranje shema boja, također dostupnih kao Sass varijable i Sass mapa u Bootstrapovoj scss/_variables.scssdatoteci.

Primarni
Sekundarna
Uspjeh
Opasnost
Upozorenje
Info
Svjetlo
tamno

Sve ove boje dostupne su kao Sass karta, $theme-colors.

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

Pogledajte naše Sass mape i dokumente o petljama da biste saznali kako izmijeniti ove boje.

Sve boje

Sve Bootstrap boje dostupne su kao Sass varijable i Sass mapa u scss/_variables.scssdatoteci. Kako bismo izbjegli povećane veličine datoteka, ne stvaramo klase boja teksta ili pozadine za svaku od ovih varijabli. Umjesto toga, odabiremo podskup ovih boja za tematsku paletu .

Obavezno pratite omjere kontrasta dok prilagođavate boje. Kao što je prikazano u nastavku, dodali smo tri omjera kontrasta svakoj od glavnih boja — jedan za trenutne boje uzorka, jedan za bijelu i jedan za crnu.

$plava#0d6efd
$plava-100
$plava-200
plava-300 dolara
plava-400 dolara
plavi $500
plava-600 dolara
plava-700 dolara
plava-800 dolara
plava-900 dolara
$indigo#6610f2
$indigo-100
indigo-200 dolara
indigo-300 dolara
indigo-400 dolara
indigo-500 dolara
indigo-600 dolara
indigo-700 dolara
indigo-800 dolara
indigo-900 dolara
$ljubičasta#6f42c1
$ljubičasta-100
$ljubičasta-200
$ljubičasta-300
$ljubičasta-400
$ljubičasta-500
ljubičasta-600$
$ljubičasta-700
$ljubičasta-800
$ljubičasta-900
$ružičasta#d63384
ružičasta-100 dolara
ružičasta-200 dolara
ružičasta-300 dolara
ružičasta-400 dolara
ružičasta-500 dolara
ružičasta-600 dolara
ružičasta-700 dolara
ružičasta-800 dolara
ružičasta-900 dolara
$crveno#dc3545
crveno-100 dolara
crveno-200 dolara
crveno-300 dolara
crveno-400 dolara
crveno-500 dolara
crveno-600 dolara
crveno-700 dolara
crveno-800 dolara
crveno-900 dolara
$narančasta#fd7e14
naranča-100 dolara
naranča-200 dolara
narančasta-300 dolara
naranča-400 dolara
naranča-500 dolara
narančasta-600 dolara
narančasta-700 dolara
narančasta-800 dolara
narančasta-900 dolara
$žuta#ffc107
$žuto-100
$žuta-200
žuto-300 dolara
žuti $400
žuti $500
žuto-600 dolara
žuto-700 dolara
žuto-800 dolara
žuto-900 $
$zeleno#198754
$zeleno-100
$zeleno-200
$zeleno-300
$zeleno-400
zelenih dolara-500
$zeleno-600
zelenih dolara-700
zelena-800$
zeleno-900 $
$teal#20c997
teal-100 dolara
200$ teal
Teal-300 dolara
Teal-400 dolara
Teal-500 dolara
Teal-600 dolara
teal-700 dolara
Teal-800 USD
teal-900 dolara
$cijan#0dcaf0
cijan-100 dolara
cijan-200 dolara
cijan-300 dolara
cijan-400 dolara
cijan-500 dolara
cijan-600 dolara
cijan-700 dolara
cijan-800 dolara
cijan-900 dolara
$sivo-500#adb5bd
sivo $100
$sivo-200
$sivo-300
$sivo-400
$sivo-500
sivo-600 dolara
sivo-700 dolara
sivo-800 dolara
sivo-900 dolara
$crna#000
$ bijelo#F F F

Bilješke o Sassu

Sass ne može programski generirati varijable, pa smo sami ručno kreirali varijable za svaku nijansu i nijansu. Određujemo srednju vrijednost (npr. $blue-500) i koristimo prilagođene funkcije boja za nijansiranje (posvijetljenje) ili sjenčanje (tamnjenje) naših boja putem Sassove mix()funkcije boja.

Korištenje mix()nije isto što lighten()i darken()— prvo miješa navedenu boju s bijelom ili crnom, dok potonje samo prilagođava vrijednost svjetline svake boje. Rezultat je mnogo potpuniji paket boja, kao što je prikazano u ovoj demonstraciji CodePen .

Naše tint-color()i shade-color()funkcije koriste se mix()zajedno s našom $theme-color-intervalvarijablom, koja navodi stepenastu postotnu vrijednost za svaku miješanu boju koju proizvodimo. Za puni izvorni kod pogledajte datoteke scss/_functions.scssi .scss/_variables.scss

Obojite Sass karte

Bootstrapove izvorne Sass datoteke uključuju tri mape koje vam pomažu da brzo i jednostavno pređete preko popisa boja i njihovih hex vrijednosti.

  • $colorsnavodi sve naše dostupne osnovne ( 500) boje
  • $theme-colorsnavodi sve semantički imenovane boje teme (prikazano u nastavku)
  • $graysnavodi sve nijanse i nijanse sive

Unutar scss/_variables.scssćete pronaći Bootstrapove varijable boja i Sass mapu. Evo primjera $colorsSass karte:

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

Dodajte, uklonite ili modificirajte vrijednosti unutar karte kako biste ažurirali način na koji se koriste u mnogim drugim komponentama. Nažalost, u ovom trenutku ne koristi svaka komponenta ovu Sass mapu. Buduća ažuriranja nastojat će to poboljšati. Do tada planirajte koristiti ${color}varijable i ovu Sass mapu.

Primjer

Evo kako ih možete koristiti u svom Sassu:

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

Klase korisnih boja i pozadine također su dostupne za postavljanje colori background-colorkorištenje 500vrijednosti boja.

Generiranje komunalnih usluga

Dodano u v5.1.0

Bootstrap ne uključuje colorpomoćne background-colorprograme za svaku varijablu boje, ali ih možete sami generirati pomoću našeg API-ja uslužnog programa i naših proširenih Sass mapa dodanih u verziji 5.1.0.

  1. Za početak provjerite jeste li uvezli naše funkcije, varijable, miksine i pomoćne programe.
  2. Upotrijebite našu map-merge-multiple()funkciju za brzo spajanje više Sass mapa zajedno u novu kartu.
  3. Spojite ovu novu kombiniranu mapu kako biste proširili bilo koji pomoćni program s {color}-{level}nazivom klase.

Evo primjera koji generira pomoćne programe za boju teksta (npr., .text-purple-500) korištenjem gornjih koraka.

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

Ovo će generirati nove .text-{color}-{level}alate za svaku boju i razinu. Isto možete učiniti i za bilo koju drugu komunalnu uslugu i imovinu.