Culore

Culori tematichi

Utilizemu un subset di tutti i culori per creà una paleta di culori più chjuca per generà schemi di culori, ancu dispunibili cum'è variabili Sass è una mappa Sass in u scss/_variables.scssschedariu Bootstrap.

Tutti questi culori sò dispunibuli cum'è una mappa Sass, $theme-colors.

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

Scuprite i nostri documenti Sass maps and loops per cumu mudificà questi culori.

Tutti i culori

Tutti i culori di Bootstrap sò dispunibuli cum'è variabili Sass è una mappa Sass in scss/_variables.scssu schedariu. Per evità l'aumentu di dimensioni di i schedari, ùn avemu micca creatu testu o classi di culore di fondu per ognuna di sti variàbili. Invece, scegliemu un subset di sti culori per una paleta di tema .

Assicuratevi di monitorà i rapporti di cuntrastu mentre personalizzate i culori. Cum'è mostratu quì sottu, avemu aghjustatu trè rapporti di cuntrastu à ognunu di i culori principali - unu per i culori attuali di u swatch, unu per u biancu è unu per u neru.

Note nantu à Sass

Sass ùn pò micca generà variabili in modu programmaticu, cusì avemu creatu manualmente variabili per ogni tinta è ombra noi stessi. Specificemu u valore di u puntu mediu (per esempiu, $blue-500) è utilizemu funzioni di culore persunalizati per tinte (illuminà) o ombrezza (scurisce) i nostri culori via a mix()funzione di culore di Sass.

L' usu mix()ùn hè micca u listessu cum'è lighten()è darken()- u primu combina u culore specificatu cù biancu o neru, mentre chì l'ultimu solu aghjusta u valore di luminosità di ogni culore. U risultatu hè una suite di culori assai più cumpleta, cum'è mostra in questa demo CodePen .

U nostru tint-color()è e shade-color()funzioni utilizanu mix()à fiancu à a nostra $theme-color-intervalvariàbile, chì specifica un valore percentuale scalatu per ogni culore mistu chì pruduciamu. Vede i schedari scss/_functions.scssè scss/_variables.scssper u codice surghjente sanu.

Carte Sass di culore

I schedarii Sass d'urighjini di Bootstrap includenu trè mappe per aiutà vi chjappà rapidamente è facilmente una lista di culori è i so valori hex.

• $colors500elenca tutti i nostri culori basi dispunibuli ( ).
• $theme-colorselenca tutti i culori di tema semanticamente chjamati (mostratu sottu)
• $grayselenca tutte e tinte è sfumature di grisgiu

Dentru scss/_variables.scss, truverete e variabili di culore di Bootstrap è a mappa Sass. Eccu un esempiu di a $colorsmappa Sass:

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

Aghjunghjite, sguassate o mudificà i valori in a mappa per aghjurnà cumu sò usati in parechji altri cumpunenti. Sfortunatamente à questu tempu, micca tutti i cumpunenti utilizanu sta mappa Sass. L'aghjurnamenti futuri s'impegnanu à migliurà questu. Finu à tandu, pensa à aduprà e ${color}variàbili è sta mappa Sass.

Esempiu

Eccu cumu pudete aduprà questi in u vostru Sass:

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

E classi di utilità di culore è di fonducolor sò ancu dispunibili per stabilisce è background-coloraduprà i 500valori di culore.

Generazione di utilità

Bootstrap ùn include micca colore background-colorutilità per ogni variabile di culore, ma pudete generà sti stessi cù a nostra API di utilità è e nostre mape Sass estese aghjunte in v5.1.0.

1. Per principià, assicuratevi di avè impurtatu e nostre funzioni, variabili, mixin è utilità.
2. Aduprate a nostra map-merge-multiple()funzione per unisce rapidamente parechje carte Sass in una nova mappa.
3. Unisce sta nova mappa cumminata per allargà ogni utilità cù un {color}-{level}nome di classa.

Eccu un esempiu chì genera utilità di culore di testu (per esempiu, .text-purple-500) utilizendu i passi sopra.

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

Questu generà novi .text-{color}-{level}utilità per ogni culore è livellu. Pudete fà u listessu per qualsiasi altra utilità è pruprietà ancu.