Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata

Bootstrap je podržan opsežnim sistemom boja koji obrađuje naše stilove i komponente. Ovo omogućava sveobuhvatnije prilagođavanje i proširenje za bilo koji projekat.

Tematske boje

Koristimo podskup svih boja da kreiramo manju paletu boja za generisanje šema boja, takođe dostupne kao Sass varijable i Sass mapa u Bootstrap scss/_variables.scssdatoteci.

Primarni
Sekundarni
Uspjeh
Opasnost
Upozorenje
Info
Light
Dark

Sve ove boje su dostupne kao Sass mapa, $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 petlji kako biste izmijenili ove boje.

Sve boje

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

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

$plavo#0d6efd
$plavi-100
$plavi-200
$plavi-300
$plavi-400
$plavi-500
$plavi-600
$plavi-700
$plavi-800
$plavi-900
$indigo#6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$ljubičasta#6f42c1
$ljubičasta-100
$ljubičasta-200
$ljubičasta-300
$ljubičasta-400
$ljubičasta-500
ljubičasta-600 dolara
ljubičasta-700 dolara
ljubičasta-800 dolara
ljubičasta-900 dolara
$pink#d63384
$ružičasti-100
Pink-200
Pink-300
$ružičasti-400
Pink-500
$ružičasti-600
Pink-700
Pink-800
$ružičasti-900
$red#dc3545
crvena-100 dolara
crvena-200 dolara
crvena-300 dolara
crvena-400 dolara
crvena-500 dolara
crvena-600 dolara
crvena-700 dolara
crvena-800 dolara
crvena-900 dolara
$orange#fd7e14
$narandža-100
$ narandža-200
$narandža-300
narandžasta-400 dolara
narandžasta-500 dolara
narandžasta-600 dolara
narandžasta-700 dolara
narandžasta-800 dolara
narandžasta-900 dolara
$žuto#ffc107
$žuti-100
$žuto-200
$žuto-300
$ žuti-400
$žuto-500
$žuti-600
$žuti-700
$ žuti-800
$ žuti-900
$zeleno#198754
$zeleno-100
$zeleno-200
$zeleno-300
$zeleno-400
$zeleno-500
$zeleno-600
$zeleno-700
$zeleno-800
$zeleno-900
$teal#20c997
$teal-100
$teal-200
Teal-300
$teal-400
Teal-500
Teal-600
Teal-700
$teal-800
$teal-900
$cyan#0dcaf0
$cijan-100
cijan-200 dolara
cijan-300 dolara
cijan-400 dolara
cijan-500 dolara
cijan-600 dolara
cijan-700 dolara
cijan-800 dolara
cijan-900 dolara
$siva-500#adb5bd
$siva-100
$siva-200
$siva-300
$siva-400
$siva-500
$siva-600
$siva-700
$siva-800
$siva-900
$black#000
$white#fff

Bilješke o Sass-u

Sass ne može programski generirati varijable, pa smo sami ručno kreirali varijable za svaku nijansu i nijansu. Mi specificiramo srednju vrijednost (npr. $blue-500) i koristimo prilagođene funkcije boja da nijansiramo (posvijetlimo) ili sjenčimo (potamnimo) naše boje putem Sassove mix()funkcije boje.

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

Naše tint-color()i shade-color()funkcije se koriste mix()uz našu $theme-color-intervalvarijablu, koja specificira stepenastu vrijednost procenta za svaku miješanu boju koju proizvodimo. Pogledajte scss/_functions.scssi scss/_variables.scssdatoteke za puni izvorni kod.

Sass karte u boji

Izvorni Sass fajlovi Bootstrapa uključuju tri mape koje će vam pomoći da brzo i lako pređete preko liste boja i njihovih heksadecimalni vrednosti.

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

Unutar scss/_variables.scss, naći ćete Bootstrap-ove varijable boja i Sass mapu. Evo primjera $colorsSass mape:

$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 izmijenite vrijednosti unutar karte da ažurirate 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 će nastojati poboljšati ovo. Do tada planirajte da koristite ${color}varijable i ovu Sass mapu.

Primjer

Evo kako ih možete koristiti u svom Sass-u:

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

Korisne klase boja i pozadinecolor su također dostupne za postavljanje i background-colorkorištenje 500vrijednosti boja.