in English

Kleur

Bootstrap word ondersteun deur 'n uitgebreide kleurstelsel wat ons style en komponente temas. Dit maak meer omvattende aanpassing en uitbreiding vir enige projek moontlik.

Op hierdie bladsy

Tema kleure

Ons gebruik 'n subset van alle kleure om 'n kleiner kleurpalet te skep vir die generering van kleurskemas, ook beskikbaar as Sass-veranderlikes en 'n Sass-kaart in Bootstrap se scss/_variables.scsslêer.

Primêr

Sekondêr

Sukses

Gevaar

Waarskuwing

Inligting

Lig

Donker

Al hierdie kleure is beskikbaar as 'n Sass-kaart, $theme-colors.

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

Kyk na ons Sass-kaarte en loops-dokumente vir hoe om hierdie kleure te verander.

Alle kleure

Alle Bootstrap-kleure is beskikbaar as Sass-veranderlikes en 'n Sass-kaart in scss/_variables.scsslêer. Om groter lêergroottes te vermy, skep ons nie teks- of agtergrondkleurklasse vir elk van hierdie veranderlikes nie. In plaas daarvan kies ons 'n subset van hierdie kleure vir 'n temapalet .

Maak seker dat u kontrasverhoudings monitor terwyl u kleure aanpas. Soos hieronder getoon, het ons drie kontrasverhoudings by elk van die hoofkleure gevoeg—een vir die monster se huidige kleure, een vir teen wit en een vir teen swart.

$blou#0d6efd

$blou-100

$blou-200

$blou-300

$blou-400

$blou-500

$blou-600

$blou-700

$blou-800

$blou-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$pers#6f42c1

$pers-100

$pers-200

$pers-300

$pers-400

$pers-500

$pers-600

$pers-700

$pers-800

$pers-900

$pienk#d63384

$pienk-100

$pienk-200

$pienk-300

$pienk-400

$pienk-500

$pienk-600

$pienk-700

$pienk-800

$pienk-900

$rooi#dc3545

$rooi-100

$rooi-200

$rooi-300

$rooi-400

$rooi-500

$rooi-600

$rooi-700

$rooi-800

$rooi-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

$teal#20c997

$teal-100

$teal-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$teal-900

$sian#0dcaf0

$sian-100

$sian-200

$sian-300

$sian-400

$sian-500

$sian-600

$sian-700

$sian-800

$sian-900

$grys-500#adb5bd

$grys-100

$grys-200

$grys-300

$grys-400

$grys-500

$grys-600

$grys-700

$grys-800

$grys-900

$swart#000

$wit#fff

Notas oor Sass

Sass kan nie veranderlikes programmaties genereer nie, so ons het self veranderlikes vir elke tint en skakering met die hand geskep. Ons spesifiseer die middelpuntwaarde (bv. $blue-500) en gebruik pasgemaakte kleurfunksies om ons kleure met Sass se kleurfunksie te tint (verlig) of skakering (verdonker) mix().

Die gebruik mix()is nie dieselfde as lighten()en darken()– eersgenoemde meng die gespesifiseerde kleur met wit of swart, terwyl laasgenoemde net die ligheidswaarde van elke kleur aanpas. Die resultaat is 'n baie meer volledige reeks kleure, soos getoon in hierdie CodePen-demo .

Ons tint-color()en shade-color()funksies gebruik mix()saam met ons $theme-color-intervalveranderlike, wat 'n getrapte persentasiewaarde spesifiseer vir elke gemengde kleur wat ons produseer. Sien die scss/_functions.scssen scss/_variables.scsslêers vir die volledige bronkode.

Kleur Sass-kaarte in

Bootstrap se bron-Sass-lêers bevat drie kaarte om jou te help om vinnig en maklik oor 'n lys kleure en hul hekswaardes te loop.

$colorslys al ons beskikbare basis ( 500) kleure
$theme-colorslys alle semanties benoemde temakleure (hieronder getoon)
$grayslys alle kleure en skakerings van grys

Binne scss/_variables.scsssal jy Bootstrap se kleurveranderlikes en Sass-kaart vind. Hier is 'n voorbeeld van die $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 waardes by, verwyder of wysig waardes binne die kaart om op te dateer hoe dit in baie ander komponente gebruik word. Ongelukkig gebruik nie elke komponent tans hierdie Sass-kaart nie. Toekomstige opdaterings sal daarna streef om hierop te verbeter. Beplan tot dan om van die ${color}veranderlikes en hierdie Sass-kaart gebruik te maak.

Voorbeeld

Hier is hoe jy dit in jou Sass kan gebruik:

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

Kleur- en agtergrondnutsklasse is ook beskikbaar vir die instelling coloren background-colorgebruik van die 500kleurwaardes.

Genereer nutsdienste

Bygevoeg in v5.1.0

Bootstrap bevat nie colornutsprogramme background-colorvir elke kleurveranderlike nie, maar jy kan dit self genereer met ons nuts-API en ons uitgebreide Sass-kaarte wat in v5.1.0 bygevoeg is.

Om te begin, maak seker dat jy ons funksies, veranderlikes, mixins en nutsprogramme ingevoer het.
Gebruik ons map-merge-multiple()funksie om vinnig verskeie Sass-kaarte saam te voeg in 'n nuwe kaart.
Voeg hierdie nuwe gekombineerde kaart saam om enige hulpprogram met 'n {color}-{level}klasnaam uit te brei.

Hier is 'n voorbeeld wat tekskleurhulpmiddels genereer (bv. .text-purple-500) deur die bogenoemde stappe te gebruik.

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

.text-{color}-{level}Dit sal nuwe nutsprogramme vir elke kleur en vlak genereer . Jy kan dieselfde doen vir enige ander nut en eiendom ook.