Cor
Bootstrap está apoiado por un amplo sistema de cores que temática dos nosos estilos e compoñentes. Isto permite unha personalización e extensión máis completa para calquera proxecto.
Cores temáticas
Usamos un subconxunto de todas as cores para crear unha paleta de cores máis pequena para xerar esquemas de cores, tamén dispoñible como variables Sass e un mapa Sass no scss/_variables.scss
ficheiro de Bootstrap.
Todas estas cores están dispoñibles como mapa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Consulta os nosos mapas e documentos de bucles de Sass para saber como modificar estas cores.
Todas as cores
Todas as cores de Bootstrap están dispoñibles como variables Sass e un mapa Sass no scss/_variables.scss
ficheiro. Para evitar o aumento do tamaño dos ficheiros, non creamos clases de texto nin de cor de fondo para cada unha destas variables. Pola contra, escollemos un subconxunto destas cores para unha paleta de temas .
Asegúrate de controlar as relacións de contraste mentres personalizas as cores. Como se mostra a continuación, engadimos tres relacións de contraste a cada unha das cores principais: unha para as cores actuais da mostra, outra para o branco e outra para o negro.
Notas sobre Sass
Sass non pode xerar variables mediante programación, polo que creamos manualmente variables para cada matiz e sombra. Especificamos o valor do punto medio (por exemplo, $blue-500
) e usamos funcións de cor personalizadas para matizar (clarecer) ou sombrear (escurecer) as nosas cores mediante a mix()
función de cor de Sass.
Usar mix()
non é o mesmo que lighten()
e darken()
—o primeiro mestura a cor especificada con branco ou negro, mentres que o segundo só axusta o valor de claridade de cada cor. O resultado é un conxunto de cores moito máis completo, como se mostra nesta demostración de CodePen .
As nosas funcións tint-color()
e úsanse xunto á nosa variable, que especifica un valor porcentual escalonado para cada cor mesturada que producimos. Consulte os ficheiros e para o código fonte completo.shade-color()
mix()
$theme-color-interval
scss/_functions.scss
scss/_variables.scss
Mapas Sass en cor
Os ficheiros Sass de orixe de Bootstrap inclúen tres mapas para axudarche a recorrer rápida e facilmente unha lista de cores e os seus valores hexadecimales.
$colors
enumera todas as nosas500
cores base ( ) dispoñibles$theme-colors
lista todas as cores do tema con nomes semánticos (mostradas a continuación)$grays
enumera todos os tons e tons de gris
Dentro scss/_variables.scss
de , atoparás as variables de cor de Bootstrap e o mapa de Sass. Aquí tes un exemplo do $colors
mapa 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
);
Engade, elimina ou modifica valores dentro do mapa para actualizar a forma en que se usan noutros compoñentes. Desafortunadamente, neste momento, non todos os compoñentes utilizan este mapa Sass. As futuras actualizacións procurarán mellorar isto. Ata entón, planea facer uso das ${color}
variables e deste mapa de Sass.
Exemplo
Aquí tes como podes usalos no teu Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Tamén están dispoñibles clases de utilidade de cor e fondocolor
para configurar e background-color
usar os 500
valores de cor.
Xeración de utilidades
Engadido na v5.1.0
Bootstrap non inclúe color
e background-color
utilidades para cada variable de cor, pero pode xeralas vostede mesmo coa nosa API de utilidades e os nosos mapas Sass estendidos engadidos na versión 5.1.0.
- Para comezar, asegúrate de importar as nosas funcións, variables, mixins e utilidades.
- Usa a nosa
map-merge-multiple()
función para combinar rapidamente varios mapas Sass nun novo mapa. - Combina este novo mapa combinado para ampliar calquera utilidade cun
{color}-{level}
nome de clase.
Aquí tes un exemplo que xera utilidades de cor de texto (por exemplo, .text-purple-500
) usando os pasos anteriores.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";
Isto xerará novas .text-{color}-{level}
utilidades para cada cor e nivel. Tamén podes facer o mesmo con calquera outra utilidade e propiedade.