in English

Color

Bootstrap és compatible amb un ampli sistema de colors que tema els nostres estils i components. Això permet una personalització i extensió més completa per a qualsevol projecte.

En aquesta pàgina

Colors temàtics

Utilitzem un subconjunt de tots els colors per crear una paleta de colors més petita per generar esquemes de colors, també disponible com a variables Sass i un mapa Sass al scss/_variables.scssfitxer de Bootstrap.

primària

Secundària

Èxit

Perill

Avís

Informació

Llum

Fosc

Tots aquests colors estan disponibles com a mapa Sass, $theme-colors.

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

Consulteu els nostres mapes i documents de bucles Sass per saber com modificar aquests colors.

Tots els colors

Tots els colors de Bootstrap estan disponibles com a variables Sass i un mapa Sass al scss/_variables.scssfitxer. Per evitar un augment de la mida dels fitxers, no creem classes de text ni de color de fons per a cadascuna d'aquestes variables. En lloc d'això, triem un subconjunt d'aquests colors per a una paleta de temes .

Assegureu-vos de controlar les relacions de contrast mentre personalitzeu els colors. Com es mostra a continuació, hem afegit tres relacions de contrast a cadascun dels colors principals: una per als colors actuals de la mostra, una per al blanc i una altra per al negre.

$blau#0d6efd

$ blau-100

$ blau-200

$ blau-300

$ blau-400

$ blau-500

$ blau-600

$ blau-700

$ blau-800

$ blau-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$ porpra#6f42c1

$ porpra-100

$ porpra-200

$ porpra-300

$ porpra-400

$ porpra-500

$ porpra-600

$ porpra-700

$ morat-800

$ porpra-900

$rosa#d63384

$ rosa-100

$ rosa-200

$ rosa-300

$ rosa-400

$ rosa-500

$ rosa-600

$ rosa-700

$ rosa-800

$ rosa-900

$vermell#dc3545

$ vermell-100

$ vermell-200

$ vermell-300

$ vermell-400

$ vermell-500

$ vermell-600

$ vermell-700

$ vermell-800

$ vermell-900

$taronja#fd7e14

$ taronja-100

$ taronja-200

$ taronja-300

$ taronja-400

$ taronja-500

$ taronja-600

$ taronja-700

$ taronja-800

$ taronja-900

$groc#ffc107

$groc-100

$groc-200

$groc-300

$groc-400

$groc-500

$groc-600

$groc-700

$groc-800

$groc-900

$verd#198754

$ verd-100

$ verd-200

$ verd-300

$ verd-400

$ verd-500

$ verd-600

$ verd-700

$ verd-800

$ verd-900

$teal#20c997

$ verdós-100

$ verdós-200

$ verdós-300

$ verdós-400

$ verdós-500

$ verd-600

$ verd-700

$ verdós-800

$ verdós-900

$ cian#0dcaf0

$ cian-100

$ cian-200

$ cian-300

$ cian-400

$ cian-500

$ cian-600

$ cian-700

$ cian-800

$ cian-900

$ gris-500#adb5bd

$ gris-100

$ gris-200

$ gris-300

$ gris-400

$ gris-500

$ gris-600

$ gris-700

$ gris-800

$ gris-900

$negre#000

$blanc#fff

Notes sobre Sass

Sass no pot generar variables de manera programàtica, de manera que hem creat manualment variables per a cada to i ombra nosaltres mateixos. Especifiquem el valor del punt mitjà (per exemple, $blue-500) i utilitzem funcions de color personalitzades per tenyir (aclarir) o ombrejar (enfosquir) els nostres colors mitjançant la mix()funció de color de Sass.

L'ús mix()no és el mateix que lighten()i darken(): el primer combina el color especificat amb el blanc o el negre, mentre que el segon només ajusta el valor de lluminositat de cada color. El resultat és un conjunt de colors molt més complet, tal com es mostra en aquesta demostració de CodePen .

Les nostres funcions tint-color()i shade-color()s'utilitzen mix()juntament amb la nostra $theme-color-intervalvariable, que especifica un valor percentual escalonat per a cada color barrejat que produïm. Vegeu els fitxers scss/_functions.scssi scss/_variables.scssper al codi font complet.

Mapes de color Sass

Els fitxers Sass d'origen de Bootstrap inclouen tres mapes per ajudar-vos a fer un bucle ràpid i senzill sobre una llista de colors i els seus valors hexadecimals.

$colorsllista tots els nostres 500colors base ( ) disponibles
$theme-colorsllista tots els colors del tema amb nom semàntic (que es mostren a continuació)
$graysenumera tots els tons i matisos de gris

Dins scss/_variables.scssde , trobareu les variables de color de Bootstrap i el mapa Sass. Aquí teniu un exemple del $colorsmapa 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
);

Afegiu, elimineu o modifiqueu valors dins del mapa per actualitzar com s'utilitzen en molts altres components. Malauradament, en aquest moment, no tots els components utilitzen aquest mapa Sass. Les futures actualitzacions s'esforçaran per millorar-ho. Fins aleshores, planifiqueu fer ús de les ${color}variables i d'aquest mapa Sass.

Exemple

A continuació us indiquem com podeu utilitzar-los al vostre Sass:

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

Les classes d'utilitat de color i fonscolor també estan disponibles per configurar i background-colorutilitzar els 500valors de color.