in English

Culore

Bootstrap hè sustinutu da un vastu sistema di culore chì tematiche i nostri stili è cumpunenti. Questu permette una persunalizazione più cumpleta è estensione per ogni prughjettu.

In sta pagina

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.

Primariu

Sicundariu

Successu

Periculu

Attenti

Info

Luce

Scuru

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.

$ blu#0d6efd

$ blu - 100

$ blu - 200

$ blu - 300

$ blu - 400

$ blu - 500

$ blu - 600

$ blu - 700

$ blu - 800

$ blu - 900

$indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ viola#6f42c1

$ viola - 100

$ viola - 200

$ viola - 300

$ viola - 400

$ viola - 500

$ viola - 600

$ viola - 700

$ viola - 800

$ viola - 900

$rosa#d63384

$ rosa - 100

$ rosa - 200

$ rosa - 300

$ rosa - 400

$ rosa - 500

$ rosa - 600

$ rosa - 700

$ rosa - 800

$ rosa - 900

$ rossu#dc3545

$ rossu - 100

$ rossu - 200

$ rossu - 300

$ rossu - 400

$ rossu - 500

$ rossu - 600

$ rossu - 700

$ rossu - 800

$ rossu - 900

$ aranciu#fd7e14

$ aranciu - 100

$ aranciu - 200

$ aranciu - 300

$ aranciu - 400

$ aranciu - 500

$ aranciu - 600

$ aranciu - 700

$ aranciu-800

$ aranciu - 900

$ giallu#ffc107

$ giallu-100

$ giallu-200

$ giallu-300

$ giallu-400

$ giallu-500

$ giallu-600

$ giallu-700

$ giallu-800

$ giallu-900

$ verde# 198754

$ verde - 100

$ verde - 200

$ verde - 300

$ verde - 400

$ verde - 500

$ verde - 600

$ verde - 700

$ verde - 800

$ verde - 900

$ teal#20c997

$ teal-100

$ teal-200

$ teal-300

$ teal - 400

$ teal - 500

$ teal-600

$ teal - 700

$ teal - 800

$ teal - 900

$ cian#0dcaf0

$ cian-100

$ cian-200

$ cian-300

$ cian-400

$ cian-500

$ cian-600

$ cian-700

$ cian-800

$ cian-900

$ grisu - 500#adb5bd

$ grisu-100

$ grisu-200

$ grisu-300

$ grisu-400

$ grisu - 500

$ grisu-600

$ grisu-700

$ grisu-800

$ grisu-900

$ neru#000

$ biancu#fff

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 (scura) i nostri culori via a mix()funzione di culore di Sass.

L' usu mix()ùn hè micca u listessu cum'è lighten()è darken()- l'anzianu 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-intervalvariabile, chì specifica un valore percentuali stepped per ogni culore mistu chì pruduciamu. Vede u scss/_functions.scssè scss/_variables.scssi schedari per u codice fonte sanu.

Carte Sass di culore

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

$colors500elenca tutti i nostri culori di basa 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,
  "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.