Opciones
Personaliza rápidamente Bootstrap con variables integradas para activar fácilmente las preferencias globales de CSS para controlar el estilo y el comportamiento.
Personaliza Bootstrap con nuestro archivo de variables personalizadas integrado y activa
fácilmente las preferencias globales de CSS con las nuevas variables de Sass $enable-*.
Sobrescribe el valor de una variable y recompila con npm run test según sea necesario.
Puedes encontrar y personalizar estas variables para opciones globales clave en el archivo
scss/_variables.scss de Bootstrap.
| Variable | Valores | Descripción |
|---|---|---|
$spacer |
1rem (predeterminado), o cualquier valor > 0 |
Especifica el valor del spacer predeterminado para generar programáticamente nuestras utilidades de spacer. |
$enable-dark-mode |
true (predeterminado) o false |
Habilita el soporte de modo oscuro integrado en todo el proyecto y sus componentes. |
$enable-rounded |
true (predeterminado) o false |
Activa los estilos predefinidos de border-radius en varios
componentes. |
$enable-shadows |
true o false (predeterminado) |
Activa los estilos decorativos predefinidos de box-shadow en varios
componentes. No afecta a los box-shadow usados para estados de foco. |
$enable-gradients |
true o false (predeterminado) |
Activa los gradientes predefinidos mediante estilos de
background-image en varios componentes. |
$enable-transitions |
true (predeterminado) o false |
Activa las transitions predefinidas en varios componentes. |
$enable-reduced-motion |
true (predeterminado) o false |
Habilita la media query prefers-reduced-motion,
que suprime ciertas animaciones/transiciones basándose en las preferencias del navegador/sistema
operativo del usuario. |
$enable-grid-classes |
true (predeterminado) o false |
Activa la generación de clases CSS para el sistema de grid (p. ej.
.row, .col-md-1, etc.). |
$enable-cssgrid |
true o false (predeterminado) |
Habilita el sistema experimental de CSS Grid (ej. .grid,
.g-col-md-1, etc.). |
$enable-container-classes |
true (predeterminado) o false |
Habilita la generación de clases CSS para contenedores de diseño. (Nuevo en v5.2.0) |
$enable-caret |
true (predeterminado) o false |
Activa el pseudo elemento caret en .dropdown-toggle. |
$enable-button-pointers |
true (predeterminado) o false |
Añade el cursor “hand” a los elementos button no deshabilitados. |
$enable-rfs |
true (predeterminado) o false |
Activa globalmente RFS. |
$enable-validation-icons |
true (predeterminado) o false |
Activa los iconos de background-image dentro de las entradas de texto
y algunos formularios personalizados para los estados de validación. |
$enable-negative-margins |
true o false (predeterminado) |
Activa la generación de utilidades de margen negativo. |
$enable-deprecation-messages |
true (predeterminado) o false |
Establece en false para ocultar las advertencias cuando se usa
cualquiera de los mixins y funciones obsoletos que están planificados para ser eliminados en
v6. |
$enable-important-utilities |
true (predeterminado) o false |
Activa el sufijo !important en las clases de utilidades. |
$enable-smooth-scroll |
true (predeterminado) o false |
Aplica scroll-behavior: smooth globalmente, excepto para los usuarios
que solicitan movimiento reducido mediante la media query
prefers-reduced-motion |