Personalizar
Aprende a crear temas, personalizar y ampliar Bootstrap con Sass, una gran cantidad de opciones globales, un sistema de color expansivo y más.
| Tópico | Descripción |
|---|---|
| Sass | Utiliza nuestros archivos fuente Sass para aprovechar variables, mapas, mixins y funciones. |
| Opciones | Personaliza Bootstrap con variables integradas para alternar fácilmente las preferencias globales de CSS. |
| Color | Aprende y personaliza los sistemas de color que respaldan todo el conjunto de herramientas. |
| Modos de color | Explora nuestro modo claro predeterminado y el nuevo modo oscuro, o crea tú mismo modos de color personalizados. |
| Componentes | Aprende cómo construimos casi todos nuestros componentes de manera responsive y con clases base y modificadoras. |
| Variables CSS | Usa las propiedades personalizadas CSS de Bootstrap para un diseño y desarrollo rápido y con visión de futuro. |
| Optimizar | Mantén tus proyectos ágiles, responsive y mantenibles para que puedas ofrecer la mejor experiencia. |
Descripción general
Hay varias formas de personalizar Bootstrap. Tu mejor camino puede depender de tu proyecto, la complejidad de tus herramientas de compilación, la versión de Bootstrap que estés utilizando, la compatibilidad del navegador y más.
Nuestros dos métodos preferidos son:
- Usar Bootstrap a través del administrador de paquetes para que puedas usar y ampliar nuestro archivos fuente.
- Usar los archivos de distribución compilados de Bootstrap o jsDelivr para que puedas agregar o sobrescribir los estilos de Bootstrap.
Si bien no podemos entrar en detalles aquí sobre cómo usar cada administrador de paquetes, podemos brindarte algunas pautas sobre cómo usar Bootstrap con tu propio compilador Sass.
Para aquellos que quieran utilizar los archivos de distribución, revisa la página de introducción para conocer cómo incluir esos archivos y una página HTML de ejemplo. Desde allí, consulta la documentación para conocer el diseño, los componentes y los comportamientos que te gustaría utilizar.
A medida que te familiarices con Bootstrap, continúa explorando esta sección para obtener más detalles sobre cómo utilizar nuestras opciones globales, cómo usar y cambiar nuestro sistema de color, cómo construimos nuestros componentes, cómo usar nuestro lista cada vez mayor de propiedades personalizadas de CSS y cómo optimizar tu código al compilar con Bootstrap.
CSP y SVG integrados
Varios componentes de Bootstrap incluyen SVG integrados en nuestro CSS para diseñar componentes de manera consistente y sencilla en todos los navegadores y dispositivos. Para organizaciones con configuraciones de CSP más estrictas, hemos documentado todas las instancias de nuestros SVG integrados (todos los cuales se aplican a través de background-image) para que puedas revisar más a fondo tus opciones.
- Acordeón
- Controles de carrusel
- Botón cerrar (usado en alertas y modales)
- Casillas de verificación y botones radio de formulario
- Switches de formulario
- Íconos de validación de formularios
- Botones de alternancia de la barra de navegación
- Menús de selección
Basado en la conversación comunitaria (opens in a new tab), algunas opciones para abordar esto en tu propia base de código incluye reemplazar las URL con assets alojados localmente, eliminar las imágenes y usar imágenes en línea (no es posible en todos los componentes) y modificando tu CSP. Nuestra recomendación es revisar cuidadosamente tus propias políticas de seguridad y decidir cuál es el mejor camino a seguir, si es necesario.