Opciones
Personaliza rápidamente Bootstrap con variables integradas para alternar fácilmente las preferencias globales de CSS para controlar el estilo y el comportamiento.
Personaliza Bootstrap con nuestro archivo de variables personalizadas incorporado y alterna fácilmente las preferencias CSS globales con las nuevas variables Sass $enable-*. Anula el valor de una variable y vuelve a compilar 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 (por defecto), o cualquier valor > 0 | Especifica el valor del espaciador predeterminado para generar mediante programación nuestras utilidades de espaciado. |
$enable-dark-mode | true (por defecto) o false | Habilita el soporte para modo oscuro incorporado en todo el proyecto y sus componentes. |
$enable-rounded | true (por defecto) o false | Habilita estilos predefinidos de border-radius en varios componentes. |
$enable-shadows | true o false (por defecto) | Habilita estilos predefinidos de sombras decorativas box-shadow en varios componentes. No afecta las box-shadow utilizadas para los estados de enfoque. |
$enable-gradients | true o false (por defecto) | Habilita degradados predefinidos a través de estilos background-image en varios componentes. |
$enable-transitions | true (por defecto) o false | Habilita transiciones (transition) predefinidas en varios componentes. |
$enable-reduced-motion | true (por defecto) o false | Habilita la consulta de medios (media query) prefers-reduced-motion, que suprime ciertas animaciones/transiciones según las preferencias del navegador/sistema operativo de los usuarios. |
$enable-grid-classes | true (por defecto) o false | Habilita la generación de clases CSS para el sistema de cuadrícula (por ejemplo, .row, .col-md-1, etc.). |
$enable-cssgrid | true o false (por defecto) | Habilita el sistema experimental CSS Grid (por ejemplo, .grid, .g-col-md-1, etc.). |
$enable-container-classes | true (por defecto) o false | Habilita la generación de clases CSS para contenedores de diseño. (Nuevo en la v5.2.0) |
$enable-caret | true (por defecto) o false | Habilita el pseudo-elemento caret (indicador) en .dropdown-toggle. |
$enable-button-pointers | true (por defecto) o false | Agrega el cursor de "mano" a los elementos de botón no deshabilitados. |
$enable-rfs | true (por defecto) o false | Habilita globalmente RFS. |
$enable-validation-icons | true (por defecto) o false | Habilita iconos de background-image dentro de entradas de texto y algunos formularios personalizados para estados de validación. |
$enable-negative-margins | true o false (por defecto) | Habilita la generación de utilidades de margen negativo. |
$enable-deprecation-messages | true (por defecto) o false | Establece en false para ocultar las advertencias al usar cualquiera de los mixins y funciones obsoletos que está previsto eliminar en la versión v6. |
$enable-important-utilities | true (por defecto) o false | Habilita el sufijo !important en las clases de utilidad. |
$enable-smooth-scroll | true (por defecto) o false | Aplica scroll-behavior: smooth globalmente, excepto para los usuarios que solicitan movimiento reducido a través de la consulta de medios prefers-reduced-motion |