Personalizar
Aprende cómo crear temas, personalizar y extender Bootstrap con Sass, un montón de opciones globales, un sistema de colores expansivo y más.
Descripción general
Hay múltiples formas de personalizar Bootstrap. Tu mejor camino puede depender de tu proyecto, la complejidad de tus herramientas de build, la versión de Bootstrap que estés usando, el soporte de navegadores y más.
Nuestros dos métodos preferidos son:
- Usar Bootstrap mediante un gestor de paquetes para que puedas usar y extender nuestros archivos fuente.
- Usar los archivos de distribución compilados de Bootstrap o jsDelivr para que puedas añadir o sobrescribir los estilos de Bootstrap.
Aunque no podemos entrar en detalles aquí sobre cómo usar cada gestor de paquetes, podemos dar algo de orientación sobre cómo usar Bootstrap con tu propio compilador de Sass.
Para quienes quieran usar los archivos de distribución, revisa la página de inicio para ver cómo incluir esos archivos y una página HTML de ejemplo. A partir de ahí, consulta la documentación para el layout, los componentes y los comportamientos que te gustaría usar.
A medida que te familiarices con Bootstrap, continúa explorando esta sección para más detalles sobre cómo utilizar nuestras opciones globales, hacer uso y cambiar nuestro sistema de colores, cómo construimos nuestros componentes, cómo usar nuestra creciente lista de propiedades personalizadas de CSS y cómo optimizar tu código al construir con Bootstrap.
CSPs y SVGs incrustados
Varios componentes de Bootstrap incluyen SVGs embebidos en nuestro CSS para estilizar los
componentes de forma consistente y sencilla entre navegadores y dispositivos. Para organizaciones con
configuraciones de CSP más estrictas, hemos
documentado todas las instancias de nuestros SVGs embebidos (todas las cuales se aplican mediante
background-image) para que puedas revisar tus opciones más a fondo.
- Accordion
- Controles del carrusel
- Botón de cierre (usado en alerts y modales)
- Casillas de verificación y botones de radio de formularios
- Interruptores de formularios
- Iconos de validación de formularios
- Botones de alternancia del navbar
- Menús select
Basado en una conversación de la comunidad, algunas opciones para abordar esto en tu propio código incluyen reemplazar las URLs con recursos alojados localmente, eliminar las imágenes y usar imágenes inline (no posible en todos los componentes), y modificar tu CSP. Nuestra recomendación es revisar cuidadosamente tus propias políticas de seguridad y decidir el mejor camino a seguir, si es necesario.