Personalización de CSS de Bootstrap 4

es | ja

Variables Sass

Las variables Sass del código fuente de Bootstrap se definen en _variables.scss con la opción !default. Puedes cambiar o modificar estas variables para personalizar los estilos de Bootstrap.

Parámetros básicos

Las variables de abajo son parámetros básicos para toda la configuración del estilo.

• $font-size-base : Tamaño de la fuente base (por defecto: 1rem), afecta a todos los tamaños de fuente de los estilos de Bootstrap
• $spacer : Longitud de la unidad para las utilidades de espaciado (por defecto: 1rem)

// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";

Cambio de preajustes de personalización

Las variables que empiezan por $enable- son preajustes de personalización incorporados (ver las opciones de Sass para el listado completo). Por ejemplo, los degradados y las sombras están desactivados por defecto (en la versión 4.1.1). Puede habilitar esas opciones con un código de extensión como el siguiente.

// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...

Vea los efectos de gradación y sombra para comprobar las diferencias de las representaciones visuales.

Modificar las variables del mapa

Sass soporta varios tipos de variables (vea Tipos de datos). La mayoría de las variables son escalares (números, cadenas, colores, booleanos y nulos). Pero las variables a continuación se definen como mapas clave-valor.

• $grays : Preselecciones de escala de grises
• $colors : Colores básicos (azul, índigo, púrpura, …)
• $theme-colors : Colores del tema Bootstrap (primario, secundario, éxito, …)
• $spacers : Valores preestablecidos de las utildades de espaciado
• $sizes : Valores preestablecidos de las utildades de tamaño
• $grid-breakpoints : Valores preestablecidos de los puntos de rotura de la rejilla (ancho de la ventana gráfica)
• $container-max-widths : Ancho del contenedor de la rejilla para cada punto de rotura

También puede modificar estas variables. Añadir y cambiar los valores son fáciles.

// Example: Modify $theme-colors$theme-colors: ( // change "success" from green to teal "success": #20c997, // add "custom" to orange "custom": #fd7e14);// import Bootstrap@import "bootstrap/scss/bootstrap";

Abajo hay muestras de alertas en vivo (comparar con los colores por defecto de Bootstrap ⇒ ver Ejemplos del documento oficial).

También puede eliminar las entradas de mapa existentes utilizando las funciones incorporadas de Sass (busque map-remove($map, $keys...) de map-functions). Pero tienes que importar los parciales invidualmente. Ver Eliminar del mapa del documento oficial para más detalles.