in English

Kleur

Bootstrap wordt ondersteund door een uitgebreid kleurensysteem dat onze stijlen en componenten thema's geeft. Dit maakt uitgebreidere aanpassingen en uitbreidingen voor elk project mogelijk.

Op deze pagina

Thema kleuren

We gebruiken een subset van alle kleuren om een kleiner kleurenpalet te creëren voor het genereren van kleurenschema's, ook beschikbaar als Sass-variabelen en een Sass-kaart in het scss/_variables.scssbestand van Bootstrap.

primair

Ondergeschikt

Succes

Gevaar

Waarschuwing

Info

Licht

Donker

Al deze kleuren zijn verkrijgbaar als Sass-kaart, $theme-colors.

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

Bekijk onze Sass-kaarten en loops-documenten voor het wijzigen van deze kleuren.

Alle kleuren

Alle Bootstrap-kleuren zijn beschikbaar als Sass-variabelen en een Sass-kaart in scss/_variables.scssbestand. Om grotere bestandsgroottes te voorkomen, maken we geen tekst- of achtergrondkleurklassen voor elk van deze variabelen. In plaats daarvan kiezen we een subset van deze kleuren voor een themapalet .

Zorg ervoor dat u de contrastverhoudingen in de gaten houdt terwijl u kleuren aanpast. Zoals hieronder wordt weergegeven, hebben we drie contrastverhoudingen toegevoegd aan elk van de hoofdkleuren: één voor de huidige kleuren van het staal, één voor tegen wit en één voor tegen zwart.

$blauw#0d6efd

$blauw-100

$blauw-200

$blauw-300

$blauw-400

$blauw-500

$blauw-600

$blauw-700

$blauw-800

$blauw-900

$indigo#6610f2

$indigo-100

$ indigo-200

$ indigo-300

$indigo-400

$ indigo-500

$ indigo-600

$indigo-700

$ indigo-800

$ indigo-900

$paars#6f42c1

$paars-100

$paars-200

$paars-300

$paars-400

$paars-500

$paars-600

$paars-700

$paars-800

$paars-900

$roze#d63384

$roze-100

$roze-200

$roze-300

$roze-400

$ roze-500

$roze-600

$roze-700

$roze-800

$roze-900

$rood#dc3545

$rood-100

$rood-200

$rood-300

$rood-400

$rood-500

$rood-600

$rood-700

$rood-800

$rood-900

$oranje#fd7e14

$oranje-100

$ oranje-200

$oranje-300

$ oranje-400

$ oranje-500

$oranje-600

$ oranje-700

$oranje-800

$oranje-900

$geel#ffc107

$geel-100

$geel-200

$geel-300

$geel-400

$geel-500

$geel-600

$geel-700

$geel-800

$geel-900

$groen#198754

$groen-100

$groen-200

$groen-300

$groen-400

$groen-500

$groen-600

$groen-700

$groen-800

$groen-900

$blauwgroen#20c997

$ groenblauw-100

$blauwgroen-200

$blauwgroen-300

$ wintertaling-400

$ wintertaling-500

$blauwgroen-600

$blauwgroen-700

$ wintertaling-800

$ wintertaling-900

$cyaan#0dcaf0

$cyaan-100

$cyaan-200

$cyaan-300

$cyaan-400

$cyaan-500

$cyaan-600

$cyaan-700

$cyaan-800

$cyaan-900

$grijs-500#adb5bd

$grijs-100

$grijs-200

$grijs-300

$grijs-400

$grijs-500

$grijs-600

$grijs-700

$grijs-800

$grijs-900

$zwart#000

$wit#ff

Opmerkingen over Sass

Sass kan geen variabelen programmatisch genereren, dus we hebben zelf handmatig variabelen gemaakt voor elke tint en tint. We specificeren de middelpuntwaarde (bijv. $blue-500) en gebruiken aangepaste kleurfuncties om onze kleuren te tinten (lichter) of schaduw (donkerder) te maken via de kleurfunctie van Sass mix().

Gebruik mix()is niet hetzelfde als lighten()en darken()—de eerste mengt de opgegeven kleur met wit of zwart, terwijl de laatste alleen de helderheidswaarde van elke kleur aanpast. Het resultaat is een veel completere reeks kleuren, zoals te zien is in deze CodePen-demo .

Onze tint-color()en shade-color()functies gebruiken mix()naast onze $theme-color-intervalvariabele, die een getrapte procentuele waarde specificeert voor elke gemengde kleur die we produceren. Zie de scss/_functions.scssen scss/_variables.scssbestanden voor de volledige broncode.

Sass-kaarten in kleur

De Sass-bronbestanden van Bootstrap bevatten drie kaarten waarmee u snel en gemakkelijk een lijst met kleuren en hun hexadecimale waarden kunt doorlopen.

$colorsgeeft al onze beschikbare basiskleuren ( 500) weer
$theme-colorsgeeft een overzicht van alle themakleuren met semantische namen (hieronder weergegeven)
$grayssomt alle tinten en grijstinten op

Binnen scss/_variables.scssvindt u de kleurvariabelen van Bootstrap en de Sass-kaart. Hier is een voorbeeld van de $colorsSass-kaart:

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

Voeg waarden toe, verwijder of wijzig waarden binnen de kaart om bij te werken hoe ze in veel andere componenten worden gebruikt. Helaas maakt op dit moment niet elk onderdeel gebruik van deze Sass-kaart. Toekomstige updates zullen ernaar streven dit te verbeteren. Maak tot die tijd gebruik van de ${color}variabelen en deze Sass-kaart.

Voorbeeld

Hier leest u hoe u deze in uw Sass kunt gebruiken:

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

Er zijn ook hulpprogrammaklassen voor kleur en achtergrondcolor beschikbaar voor het instellen en background-colorgebruiken van de 500kleurwaarden.

Hulpprogramma's genereren

Toegevoegd in v5.1.0

Bootstrap bevat geen hulpprogramma color's background-colorvoor elke kleurvariabele, maar u kunt deze zelf genereren met onze hulpprogramma-API en onze uitgebreide Sass-kaarten die zijn toegevoegd in v5.1.0.

Zorg er om te beginnen voor dat je onze functies, variabelen, mixins en utilities hebt geïmporteerd.
Gebruik onze map-merge-multiple()functie om snel meerdere Sass-kaarten samen te voegen in een nieuwe kaart.
Voeg deze nieuwe gecombineerde kaart samen om elk hulpprogramma uit te breiden met een {color}-{level}klassenaam.

Hier is een voorbeeld dat hulpprogramma's voor tekstkleur genereert (bijv. .text-purple-500) met behulp van de bovenstaande stappen.

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

Dit genereert nieuwe .text-{color}-{level}hulpprogramma's voor elke kleur en elk niveau. U kunt hetzelfde doen voor elk ander hulpprogramma en eigendom.