14/9/2019 Bootstrap temático · Bootstrap

Bootstrap temático
Personalice Bootstrap 4 con nuestras nuevas variables Sass integradas
para preferencias de estilo globales para una fácil creación de temas y
cambios de componentes.

Ahorre hasta 4 veces en la

supervisión del servidor.
anuncios a través de
carbono

Introducción
En Bootstrap 3, la temática fue impulsada en gran medida por anulaciones variables en MENOS, CSS
personalizado y una hoja de estilo de tema separada que incluimos en nuestros distarchivos. Con un
poco de esfuerzo, uno podría rediseñar completamente el aspecto de Bootstrap 3 sin tocar los
archivos principales. Bootstrap 4 proporciona un enfoque familiar, pero ligeramente diferente.

Ahora, la temática se logra mediante variables Sass, mapas Sass y CSS personalizado. No hay más
hojas de estilo de tema dedicadas; en su lugar, puede habilitar el tema incorporado para agregar
degradados, sombras y más.

Hablar con descaro a

Utilice nuestros archivos Sass de origen para aprovechar variables, mapas, mixins y más. En nuestra
construcción, hemos aumentado la precisión de redondeo de Sass a 6 (por defecto es 5) para evitar
problemas con el redondeo del navegador.

Estructura de archivo
Siempre que sea posible, evite modificar los archivos principales de Bootstrap. Para Sass, eso significa
crear su propia hoja de estilo que importe Bootstrap para que pueda modificarla y extenderla.
Suponiendo que está utilizando un administrador de paquetes como npm, tendrá una estructura de
archivo similar a esta:

Copiar
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss

Si ha descargado nuestros archivos fuente y no está usando un administrador de paquetes, querrá

configurar manualmente algo similar a esa estructura, manteniendo los archivos fuente de Bootstrap
separados de los suyos.

Copiar
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss

Importador
https://getbootstrap.com/docs/4.3/getting-started/theming/ 1/10
14/9/2019 Bootstrap temático · Bootstrap

En su custom.scss, importará los archivos Sass de origen de Bootstrap. Tiene dos opciones: incluir
todo Bootstrap o elegir las piezas que necesita. Alentamos a este último, aunque tenga en cuenta que
hay algunos requisitos y dependencias entre nuestros componentes. También deberá incluir algunos
JavaScript para nuestros complementos.

Copiar
// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

Copiar
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Con esa configuración en su lugar, puede comenzar a modificar cualquiera de las variables Sass y
mapas en su custom.scss. También puede comenzar a agregar partes de Bootstrap en la //
Optionalsección según sea necesario. Sugerimos utilizar la pila de importación completa de nuestro
bootstrap.scssarchivo como punto de partida.

Valores predeterminados variables

Cada variable Sass en Bootstrap 4 incluye la !defaultbandera que le permite anular el valor
predeterminado de la variable en su propio Sass sin modificar el código fuente de Bootstrap. Copie y
pegue variables según sea necesario, modifique sus valores y elimine la !defaultbandera. Si ya se ha
asignado una variable, los valores predeterminados en Bootstrap no la reasignarán.

Encontrará la lista completa de las variables de Bootstrap en scss/_variables.scss. Algunas variables

se establecen en null, estas variables no generan la propiedad a menos que se anulen en su
configuración.

Las anulaciones de variables dentro del mismo archivo Sass pueden aparecer antes o después de las
variables predeterminadas. Sin embargo, al anular archivos Sass, sus anulaciones deben aparecer
antes de importar los archivos Sass de Bootstrap.

Aquí hay un ejemplo que cambia el background-colory colorpara el <body>al importar y compilar
Bootstrap a través de npm:

Copiar
// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables

@import "../node_modules/bootstrap/scss/bootstrap";

Repita según sea necesario para cualquier variable en Bootstrap, incluidas las opciones globales a
continuación.

Mapas y bucles
Bootstrap 4 incluye un puñado de mapas Sass, pares de valores clave que facilitan la generación de
familias de CSS relacionados. Usamos mapas Sass para nuestros colores, puntos de corte de la
cuadrícula y más. Al igual que las variables Sass, todos los mapas Sass incluyen la !defaultbandera y
https://getbootstrap.com/docs/4.3/getting-started/theming/ 2/10
14/9/2019 Bootstrap temático · Bootstrap

pueden anularse y ampliarse.

Algunos de nuestros mapas Sass se fusionan en vacíos por defecto. Esto se hace para permitir una
fácil expansión de un mapa Sass dado, pero tiene el costo de hacer que eliminar elementos de un
mapa sea un poco más difícil.

Modificar mapa
Para modificar un color existente en nuestro $theme-colorsmapa, agregue lo siguiente a su archivo
Sass personalizado:

Copiar
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);

Agregar al mapa
Para agregar un nuevo color $theme-colors, agregue la nueva clave y valor:

Copiar
$theme-colors: (
"custom-color": #900
);

Eliminar del mapa

Para eliminar colores $theme-colorso cualquier otro mapa, use map-remove. Tenga en cuenta que debe
insertarlo entre nuestros requisitos y opciones:

Copiar
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Claves requeridas
Bootstrap supone la presencia de algunas teclas específicas dentro de los mapas Sass a medida que
las usamos y las ampliamos nosotros mismos. A medida que personaliza los mapas incluidos, puede
encontrar errores cuando se usa la clave de un mapa Sass específico.

Por ejemplo, utilizamos las primary, successy dangerlas llaves de $theme-colorslos enlaces, botones, y
los estados de forma. Reemplazar los valores de estas claves no debería presentar problemas, pero
eliminarlos puede causar problemas de compilación de Sass. En estos casos, deberá modificar el
código Sass que hace uso de esos valores.

Las funciones
Bootstrap utiliza varias funciones Sass, pero solo un subconjunto es aplicable a temas generales.
Hemos incluido tres funciones para obtener valores de los mapas de colores:

Copiar

https://getbootstrap.com/docs/4.3/getting-started/theming/ 3/10
14/9/2019 Bootstrap temático · Bootstrap

@function color($key: "blue") {

@return map-get($colors, $key);
}

@function theme-color($key: "primary") {

@return map-get($theme-colors, $key);
}

@function gray($key: "100") {

@return map-get($grays, $key);
}

Estos le permiten elegir un color de un mapa Sass, de forma muy similar a cómo usaría una variable
de color de v3.

Copiar
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}

También tenemos otra función para obtener un nivel particular de color del $theme-colorsmapa. Los
valores de nivel negativos aclararán el color, mientras que los niveles más altos se oscurecerán.

Copiar
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);

@return mix($color-base, $color, $level * $theme-color-interval);

}

En la práctica, llamaría a la función y pasaría dos parámetros: el nombre del color $theme-colors(por
ejemplo, primario o peligro) y un nivel numérico.

Copiar
.custom-element {
color: theme-color-level(primary, -10);
}

Se podrían agregar funciones adicionales en el futuro o su propio Sass personalizado para crear
funciones de nivel para mapas Sass adicionales, o incluso uno genérico si quisiera ser más detallado.

Contraste de color
Una función adicional incluimos en Bootstrap es la función de contraste de color, color-yiq. Utiliza el
espacio de color YIQ para devolver automáticamente un color de contraste claro ( #fff) u oscuro (
#111) basado en el color base especificado. Esta función es especialmente útil para mixins o loops
donde estás generando múltiples clases.

Por ejemplo, para generar muestras de color de nuestro $theme-colorsmapa:

Copiar
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}

También se puede usar para necesidades de contraste únicas:

Copiar

https://getbootstrap.com/docs/4.3/getting-started/theming/ 4/10
14/9/2019 Bootstrap temático · Bootstrap

.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}

También puede especificar un color base con nuestras funciones de mapa de colores:

Copiar
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Opciones de Sass
Personalice Bootstrap 4 con nuestro archivo de variables personalizadas incorporado y cambie
fácilmente las preferencias globales de CSS con nuevas $enable-*variables Sass. Anule el valor de una
variable y vuelva a compilarlo npm run testsegún sea necesario.

Puede encontrar y personalizar estas variables para opciones globales clave en el

scss/_variables.scssarchivo Bootstrap .

Variable Valores Descripción

$spacer 1rem Especifica el valor de

(predeterminado) espaciador
o cualquier valor> predeterminado para
0 generar mediante
programación nuestras
utilidades de espaciador .

$enable-rounded true Permite border-

(predeterminado) radiusestilos predefinidos
o false en varios componentes.

$enable-shadows trueo Permite box-shadowestilos

false(predeterminado)predefinidos en varios
componentes.

$enable-gradients trueo Permite gradientes

false(predeterminado)predefinidos a través de
background-imageestilos
en varios componentes.

$enable-transitions true Habilita correos

(predeterminado) electrónicos predefinidos
o false transitionen varios
componentes.

$enable-prefers-reduced-motion-media-query true Habilita la prefers-

(predeterminado) reduced-motionconsulta
o false de medios , que suprime
ciertas animaciones /
transiciones basadas en
las preferencias del
navegador / sistema
operativo de los usuarios.

$enable-hover-media-query trueo Obsoleto

false(predeterminado)

https://getbootstrap.com/docs/4.3/getting-started/theming/ 5/10
14/9/2019 Bootstrap temático · Bootstrap

Variable Valores Descripción

$enable-grid-classes true Permite la generación de

(predeterminado) clases CSS para el sistema
o false de red (por ejemplo,
.container, .row, .col-md-
1, etc.).

$enable-caret true Habilita el cuidado del

(predeterminado) pseudo elemento
o false .dropdown-toggle.

$enable-pointer-cursor-for-buttons true Agregue el cursor "mano"

(predeterminado) a los elementos de botón
o false no deshabilitados.

$enable-print-styles true Permite estilos para

(predeterminado) optimizar la impresión.
o false

$enable-responsive-font-sizes trueo Permite tamaños de

false(predeterminado)fuente receptivos .

$enable-validation-icons true Habilita background-

(predeterminado) imageiconos dentro de
o false entradas de texto y
algunos formularios
personalizados para
estados de validación.

$enable-deprecation-messages trueo Configure para

false(predeterminado)truemostrar advertencias
cuando use cualquiera de
los mixins y funciones en
desuso que se planea
eliminar v5.

Color
Muchos de los diversos componentes y utilidades de Bootstrap se crean a través de una serie de
colores definidos en un mapa Sass. Este mapa se puede recorrer en Sass para generar rápidamente
una serie de conjuntos de reglas.

Todos los colores

Todos los colores disponibles en Bootstrap 4, están disponibles como variables Sass y un mapa Sass
en el scss/_variables.scssarchivo. Esto se ampliará en lanzamientos menores posteriores para
agregar sombras adicionales, al igual que la paleta de escala de grises que ya incluimos.

Azul Índigo Púrpura

Rosado rojo naranja

Amarillo Verde Verde azulado

Cian

https://getbootstrap.com/docs/4.3/getting-started/theming/ 6/10
14/9/2019 Bootstrap temático · Bootstrap

Así es como puede usarlos en su Sass:

Copiar
// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function

.beta { color: color("purple"); }

Las clases de utilidad de color también están disponibles para configurar colory background-color.

En el futuro, buscaremos proporcionar mapas y variables Sass para sombras de cada color
como lo hemos hecho con los colores en escala de grises a continuación.

Colores temáticos
Utilizamos un subconjunto de todos los colores para crear una paleta de colores más pequeña para
generar esquemas de color, también disponibles como variables Sass y un mapa Sass en el
scss/_variables.scssarchivo Bootstraps .

Primario Secundario Éxito

Peligro Advertencia Informacion

Ligero Oscuro

Grises
Un amplio conjunto de variables grises y un mapa Sass scss/_variables.scsspara obtener tonos de
gris consistentes en todo su proyecto. Tenga en cuenta que estos son "grises fríos", que tienden a un
tono azul sutil, en lugar de grises neutros.

100

200

300

400

500

600

700

800

900

Dentro scss/_variables.scss, encontrará de variables de color y un mapa Sass Bootstrap. Aquí hay un
ejemplo del $colorsmapa Sass:

Copiar

https://getbootstrap.com/docs/4.3/getting-started/theming/ 7/10
14/9/2019 Bootstrap temático · Bootstrap

$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,
Search...
"gray-dark": $gray-800
) !default;

Empezando
Introducción Agregue, elimine o modifique valores dentro del mapa para actualizar cómo se usan en muchos otros
Descargar componentes. Desafortunadamente en este momento, no todos los componentes utilizan este mapa
Sass. Las actualizaciones futuras se esforzarán por mejorar esto. Hasta entonces, planifique hacer uso
Contenido
de las ${color}variables y este mapa Sass.
Navegadores y dispositivos

JavaScript

Temática
Componentes
Construir herramientas
Muchos de los componentes y utilidades de Bootstrap están construidos con @eachbucles que iteran
Paquete web sobre un mapa Sass. Esto es especialmente útil para generar variantes de un componente mediante
Accesibilidad nuestro $theme-colorsy crear variantes receptivas para cada punto de interrupción. A medida que
personaliza estos mapas Sass y vuelve a compilar, verá automáticamente sus cambios reflejados en
Diseño estos bucles.
Contenido

Componentes Modificadores
Utilidades Muchos de los componentes de Bootstrap están construidos con un enfoque de clase de modificador
base. Esto significa que la mayor parte del estilo está contenido en una clase base (por ejemplo, .btn)
Ampliar
mientras que las variaciones de estilo se limitan a las clases modificadoras (por ejemplo, .btn-danger).
Migración Estas clases modificadoras se crean a partir del $theme-colorsmapa para personalizar el número y el
Acerca de nombre de nuestras clases modificadoras.

Aquí hay dos ejemplos de cómo recorremos el $theme-colorsmapa para generar modificadores para
el .alertcomponente y todas nuestras .bg-*utilidades en segundo plano.

Copiar
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color,
-9), theme-color-level($color, 6));
}
}

// Generate `.bg-*` color utilities

@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}

Sensible
Estos bucles Sass tampoco se limitan a los mapas de colores. También puede generar variaciones
receptivas de sus componentes o utilidades. Tomemos, por ejemplo, nuestras utilidades de alineación
de texto receptivo donde mezclamos un @eachbucle para el $grid-breakpointsmapa Sass con una
consulta de medios incluida.

Copiar

https://getbootstrap.com/docs/4.3/getting-started/theming/ 8/10
14/9/2019 Bootstrap temático · Bootstrap

@each $breakpoint in map-keys($grid-breakpoints) {

@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

.text#{$infix}-left { text-align: left !important; }

.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}

Si necesita modificar su $grid-breakpoints, sus cambios se aplicarán a todos los bucles que iteran
sobre ese mapa.

Variables CSS
Bootstrap 4 incluye alrededor de dos docenas de propiedades personalizadas de CSS (variables) en su
CSS compilado. Proporcionan un fácil acceso a los valores de uso común, como los colores de
nuestros temas, los puntos de interrupción y las pilas de fuentes primarias cuando se trabaja en el
Inspector de su navegador, un entorno limitado de código o prototipos generales.

Variables disponibles
Aquí están las variables que incluimos (tenga en cuenta que :rootse requiere). Están ubicados en
nuestro _root.scssarchivo.

Copiar
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI
Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
}

Ejemplos
Las variables CSS ofrecen una flexibilidad similar a las variables de Sass, pero sin la necesidad de
compilarlas antes de enviarlas al navegador. Por ejemplo, aquí estamos restableciendo la fuente de
nuestra página y los estilos de enlace con variables CSS.

https://getbootstrap.com/docs/4.3/getting-started/theming/ 9/10
14/9/2019 Bootstrap temático · Bootstrap

Copiar
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}

Variables de punto de interrupción

Si bien originalmente incluimos puntos de interrupción en nuestras variables CSS (por ejemplo, --
breakpoint-md), estos no son compatibles con las consultas de medios , pero aún pueden usarse
dentro de conjuntos de reglas en consultas de medios. Estas variables de punto de interrupción
permanecen en el CSS compilado para la compatibilidad con versiones anteriores dado que pueden
ser utilizadas por JavaScript. Obtenga más información en la especificación .

Aquí hay un ejemplo de lo que no es compatible:

Copiar
@media (min-width: var(--breakpoint-sm)) {
...
}

Y aquí hay un ejemplo de lo que se admite:

Copiar
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}

https://getbootstrap.com/docs/4.3/getting-started/theming/ 10/10