Přejít na hlavní obsah Přejít na navigaci v dokumentech

Bootstrap je podporován rozsáhlým barevným systémem, který je tématem našich stylů a komponent. To umožňuje komplexnější přizpůsobení a rozšíření pro jakýkoli projekt.

Barvy motivu

Používáme podmnožinu všech barev k vytvoření menší palety barev pro generování barevných schémat, která je také dostupná jako proměnné Sass a mapa Sass v scss/_variables.scsssouboru Bootstrap.

Hlavní
Sekundární
Úspěch
Nebezpečí
Varování
Info
Světlo
Temný

Všechny tyto barvy jsou dostupné jako Sass mapa, $theme-colors.

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

Podívejte se na naše dokumenty k mapám a smyčkám Sass , kde najdete informace o tom, jak tyto barvy upravit.

Všechny barvy

Všechny barvy Bootstrapu jsou dostupné jako proměnné Sass a mapa Sass v scss/_variables.scsssouboru. Abychom se vyhnuli zvětšeným velikostem souborů, nevytváříme třídy barev textu nebo pozadí pro každou z těchto proměnných. Místo toho vybereme podmnožinu těchto barev pro paletu motivů .

Při přizpůsobování barev nezapomeňte sledovat kontrastní poměry. Jak je ukázáno níže, ke každé z hlavních barev jsme přidali tři kontrastní poměry – jeden pro aktuální barvy vzorníku, jeden pro proti bílé a jeden pro proti černé.

$modrá#0d6efd
modrá - 100 $
modrá - 200 dolarů
modrá - 300 dolarů
modrá - 400 dolarů
modrá - 500 dolarů
modrá - 600 dolarů
modrá - 700 dolarů
modrá - 800 dolarů
modrá - 900 dolarů
$indigo#6610f2
indigo-100 $
indigo-200 $
indigo-300 $
indigo-400 $
indigo-500 $
indigo-600 $
indigo-700 $
indigo-800 $
indigo-900 $
$fialová#6f42c1
fialová - 100 $
fialová - 200 $
fialová - 300 $
fialová - 400 $
fialová - 500 $
fialová - 600 $
fialová - 700 USD
fialová - 800 USD
fialová - 900 dolarů
$růžová#d63384
růžová - 100 $
růžová - 200 dolarů
růžová - 300 dolarů
růžová - 400 dolarů
růžová - 500 dolarů
růžová - 600 dolarů
růžová - 700 dolarů
růžová - 800 dolarů
růžová - 900 dolarů
$red#dc3545
červená - 100 dolarů
červená - 200 dolarů
červená - 300 dolarů
červená - 400 dolarů
červená - 500 dolarů
červená - 600 dolarů
červená - 700 dolarů
červená - 800 dolarů
červená - 900 dolarů
$oranžová#fd7e14
oranžová - 100 $
oranžová - 200 $
oranžová - 300 $
oranžová - 400 $
oranžová - 500 USD
oranžová - 600 $
oranžová - 700 USD
oranžová - 800 USD
oranžová - 900 dolarů
$žlutá#ffc107
$ žlutá - 100
$ žlutá - 200
$ žlutá - 300
$ žlutá - 400
$ žlutá - 500
$ žlutá - 600
$ žlutá - 700
$ žlutá - 800
$ žlutá - 900
$zelená#198754
zelená - 100 $
Zelená - 200 USD
zelená - 300 dolarů
zelená - 400 dolarů
zelená - 500 dolarů
Zelená - 600 USD
Zelená - 700 USD
zelená - 800 dolarů
zelená - 900 dolarů
$teal#20c997
$ modrozelená-100
$ modrozelená - 200
$ modrozelená - 300
$ modrozelená - 400
$ modrozelená - 500
$ modrozelená - 600
$ modrozelená - 700
800 $ modrozelená
$ modrozelená - 900
$ azurová#0dcaf0
Azurová - 100 $
Azurová - 200 $
Azurová - 300 $
Azurová - 400 USD
Azurová - 500 $
Azurová - 600 USD
Azurová - 700 USD
Azurová - 800 USD
Azurová - 900 USD
šedá - 500 $#adb5bd
$ šedá - 100
$ šedá - 200
$ šedá - 300
$ šedá - 400
šedá - 500 $
$ šedá - 600
$ šedá - 700
$ šedá - 800
$ šedá - 900
$černá#000
$bílá#fff

Poznámky k Sassovi

Sass neumí programově generovat proměnné, takže jsme ručně vytvořili proměnné pro každý odstín a odstín sami. Určujeme střední hodnotu (např. $blue-500) a používáme vlastní barevné funkce k tónování (zesvětlení) nebo stínování (ztmavení) našich barev pomocí mix()funkce barev Sass.

Použití mix()není stejné jako lighten()a darken()— první smíchá specifikovanou barvu s bílou nebo černou, zatímco druhé pouze upraví hodnotu světlosti každé barvy. Výsledkem je mnohem kompletnější sada barev, jak je ukázáno v této ukázce CodePen .

Naše tint-color()a shade-color()funkce se používají mix()spolu s naší $theme-color-intervalproměnnou, která specifikuje stupňovitou procentuální hodnotu pro každou namíchanou barvu, kterou vyrábíme. Úplný zdrojový kód naleznete v scss/_functions.scsssouborech a .scss/_variables.scss

Barevné mapy Sass

Zdrojové soubory Sass Bootstrapu obsahují tři mapy, které vám pomohou rychle a snadno procházet seznamem barev a jejich hexadecimálních hodnot.

  • $colorsuvádí všechny naše dostupné základní ( 500) barvy
  • $theme-colorsuvádí všechny sémanticky pojmenované barvy motivu (zobrazeno níže)
  • $graysuvádí všechny odstíny a odstíny šedé

V scss/_variables.scss, najdete barevné proměnné Bootstrapu a mapu Sass. Zde je pří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
);

Přidejte, odeberte nebo upravte hodnoty v mapě, abyste aktualizovali způsob jejich použití v mnoha dalších komponentách. Bohužel v současné době ne každá součást využívá tuto mapu Sass. Budoucí aktualizace se budou snažit toto zlepšit. Do té doby plánujte využití ${color}proměnných a této mapy Sass.

Příklad

Zde je návod, jak je můžete použít ve svém Sass:

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

Pro nastavení a použití hodnot barev jsou k dispozici také třídy obslužných programů barvy a pozadí .colorbackground-color500

Generování inženýrských sítí

Přidáno ve verzi 5.1.0

Bootstrap nezahrnuje nástroje colora background-colornástroje pro každou barevnou proměnnou, ale můžete si je vygenerovat sami pomocí našeho API nástroje a našich rozšířených map Sass přidaných ve verzi 5.1.0.

  1. Pro začátek se ujistěte, že jste importovali naše funkce, proměnné, mixiny a utility.
  2. Použijte naši map-merge-multiple()funkci k rychlému sloučení více Sass map dohromady do nové mapy.
  3. Sloučením této nové kombinované mapy rozšíříte jakýkoli nástroj o {color}-{level}název třídy.

Zde je příklad, který .text-purple-500pomocí výše uvedených kroků generuje nástroje pro barvu textu (např. ).

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

To vytvoří nové .text-{color}-{level}nástroje pro každou barvu a úroveň. Totéž můžete udělat pro jakýkoli jiný nástroj a majetek.