Bootstrap de tematización

Personalice Bootstrap 4 con nuestras nuevas variables Sass integradas para preferencias de estilo global para facilitar la creación de temas y cambios de componentes.

Introducción

En Bootstrap 3, la tematización estuvo impulsada en gran medida por anulaciones de variables en LESS, CSS personalizado y una hoja de estilo de tema separada que incluimos en nuestros distarchivos. Con algo de esfuerzo, se podría rediseñar por completo el aspecto de Bootstrap 3 sin tocar los archivos principales. Bootstrap 4 proporciona un enfoque familiar, pero ligeramente diferente.

Ahora, la tematización se logra mediante variables Sass, mapas Sass y CSS personalizado. No hay una hoja de estilo de tema más dedicada; 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, combinaciones y más al compilar Sass utilizando su propia canalización de activos.

Estructura de archivos

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 ampliarla. Suponiendo que está utilizando un administrador de paquetes como npm, tendrá una estructura de archivos que se ve así:

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

Si descargó nuestros archivos fuente y no está utilizando un administrador de paquetes, querrá configurar manualmente algo similar a esa estructura, manteniendo los archivos fuente de Bootstrap separados de los suyos.

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

Importador

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

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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 y mapas de Sass en su archivo custom.scss. También puede comenzar a agregar partes de Bootstrap en la // Optionalsección según sea necesario. Sugerimos usar la pila de importación completa de nuestro bootstrap.scssarchivo como punto de partida.

Valores predeterminados variables

Cada variable de Sass en Bootstrap incluye el !defaultindicador 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 las variables según sea necesario, modifique sus valores y elimine la !defaultbandera. Si ya se asignó una variable, no se reasignará con los valores predeterminados en Bootstrap.

Encontrará la lista completa de 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 deben realizarse después de importar nuestras funciones, variables y mixins, pero antes del resto de las importaciones.

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

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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 relacionadas. Usamos mapas Sass para nuestros colores, puntos de interrupción de cuadrícula y más. Al igual que las variables de Sass, todos los mapas de Sass incluyen la !defaultbandera y se pueden anular y ampliar.

Algunos de nuestros mapas Sass se fusionan en mapas vacíos de forma predeterminada. Esto se hace para permitir una fácil expansión de un mapa Sass determinado, pero tiene el costo de hacer que la eliminación de 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:

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

Añadir al mapa

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

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

Quitar del mapa

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

// 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 asume la presencia de algunas claves específicas dentro de los mapas de Sass tal como las usamos y las ampliamos nosotros mismos. A medida que personaliza los mapas incluidos, es posible que encuentre errores cuando se utiliza la clave de un mapa Sass específico.

Por ejemplo, usamos las teclas , y de primarypara successenlaces , botones y estados de formulario. Reemplazar los valores de estas claves no debería presentar problemas, pero eliminarlas puede causar problemas de compilación de Sass. En estos casos, deberá modificar el código Sass que utiliza esos valores.danger$theme-colors

Funciones

Bootstrap utiliza varias funciones de Sass, pero solo un subconjunto es aplicable a la tematización general. Hemos incluido tres funciones para obtener valores de los mapas de colores:

@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 como usaría una variable de color de v3.

.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 lo oscurecerán.

@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(p. ej., primario o peligro) y un nivel numérico.

.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 desea ser más detallado.

Contraste de color

Una función adicional que 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 bucles en los que genera varias clases.

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

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

También se puede utilizar para necesidades puntuales de contraste:

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

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

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

Escapar SVG

Usamos la escape-svgfunción para escapar de los caracteres <, >y #para las imágenes de fondo SVG. Estos caracteres deben escaparse para representar correctamente las imágenes de fondo en IE. Al usar la escape-svgfunción, se deben citar los URI de datos.

Sumar y restar funciones

Usamos las funciones addy subtractpara envolver la función CSS calc. 0El objetivo principal de estas funciones es evitar errores cuando se pasa un valor "sin unidades" a una calcexpresión. Expresiones como calc(10px - 0)devolverán un error en todos los navegadores, a pesar de ser matemáticamente correctas.

Ejemplo donde el cálculo es válido:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Ejemplo donde el cálculo no es válido:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Opciones descaradas

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

Puede encontrar y personalizar estas variables para opciones globales clave en el scss/_variables.scssarchivo de Bootstrap.

Color

Muchos de los diversos componentes y utilidades de Bootstrap se construyen a través de una serie de colores definidos en un mapa Sass. Este mapa se puede reproducir en bucle 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 scss/_variables.scssarchivo. Esto se ampliará en versiones menores posteriores para agregar tonos adicionales, al igual que la paleta de escala de grises que ya incluimos.

Así es como puede usarlos en su Sass:

// 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.

colores del tema

Usamos un subconjunto de todos los colores para crear una paleta de colores más pequeña para generar esquemas de color, también disponible como variables de Sass y un mapa de Sass en el scss/_variables.scssarchivo de Bootstrap.

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.

Dentro scss/_variables.scssde , encontrará las variables de color de Bootstrap y el mapa de Sass. Aquí hay un ejemplo 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
) !default;

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

Componentes

Muchos de los componentes y utilidades de Bootstrap están construidos con @eachbucles que iteran sobre un mapa de Sass. Esto es especialmente útil para generar variantes de un componente $theme-colorsy crear variantes de respuesta para cada punto de interrupción. A medida que personaliza estos mapas de Sass y los vuelve a compilar, verá automáticamente sus cambios reflejados en estos bucles.

modificadores

Muchos de los componentes de Bootstrap están construidos con un enfoque de clase de modificador de base. Esto significa que la mayor parte del estilo está contenido en una clase base (p. ej., .btn) mientras que las variaciones de estilo se limitan a las clases de modificadores (p. ej., .btn-danger). Estas clases de modificadores se construyen a partir del $theme-colorsmapa para personalizar el número y el nombre de nuestras clases de modificadores.

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.

// 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 de Sass tampoco se limitan a mapas de colores. También puede generar variaciones sensibles 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.

@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 iteren sobre ese mapa.

Variables CSS

Bootstrap 4 incluye alrededor de dos docenas de propiedades personalizadas de CSS (variables) en su CSS compilado. Estos brindan un fácil acceso a los valores de uso común, como nuestros colores de tema, puntos de interrupción y pilas de fuentes primarias cuando se trabaja en el Inspector de su navegador, un espacio aislado de código o creación de prototipos en general.

Variables disponibles

Estas son las variables que incluimos (tenga en cuenta que :rootes obligatorio). Están ubicados en nuestro _root.scssarchivo.

: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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Ejemplos

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

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

Variables de punto de ruptura

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 se pueden usar dentro de los conjuntos de reglas en las consultas de medios. Estas variables de punto de interrupción permanecen en el CSS compilado por compatibilidad con versiones anteriores, dado que pueden ser utilizadas por JavaScript. Obtenga más información en las especificaciones .

Este es un ejemplo de lo que no es compatible:

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

Y aquí hay un ejemplo de lo que es compatible:

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