Skip to main content Skip to docs navigation
Ver en GitHub

Personalizar

Aprende a tematizar, personalizar y extender Bootstrap con Sass, una gran cantidad de opciones globales, un amplio sistema de colores y más.

Sass Utiliza nuestros archivos Sass fuente para aprovechar las variables, mapas, mixins y funciones.
Opciones Personaliza Bootstrap con variables integradas para alternar fácilmente las preferencias globales de CSS.
Color Conoce 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 modos de color personalizados tú mismo.
Componentes Aprende cómo creamos casi todos nuestros componentes de forma responsiva y con clases base y modificadoras.
Variables CSS Utiliza las propiedades personalizadas de CSS de Bootstrap para un diseño y desarrollo rápidos y orientados al futuro.
Optimizar Mantén tus proyectos eficientes, responsivos y fáciles de mantener para ofrecer la mejor experiencia.

Resumen

Existen múltiples 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, el soporte del navegador y más.

Nuestros dos métodos preferidos son:

  1. Usar Bootstrap a través de un gestor de paquetes para que puedas usar y extender nuestros archivos fuente.
  2. Usar los archivos de distribución compilados de Bootstrap o jsDelivr para que puedas agregar o anular los estilos de Bootstrap.

Si bien no podemos entrar en detalles aquí sobre cómo usar cada gestor de paquetes, podemos dar alguna guía sobre el uso de Bootstrap con tu propio compilador Sass.

Para aquellos que deseen utilizar los archivos de distribución, revisen la página de inicio rápido para saber cómo incluir esos archivos y ver un ejemplo de página HTML. A partir de ahí, consulta la documentación sobre 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, hacer uso y cambiar nuestro sistema de color, cómo construimos nuestros componentes, cómo utilizar nuestra lista creciente de propiedades personalizadas de CSS y cómo optimizar tu código al compilar con Bootstrap.

CSP y SVG incrustados

Varios componentes de Bootstrap incluyen SVG incrustados en nuestro CSS para dar estilo a los componentes de manera consistente y fácil en todos los navegadores y dispositivos. Para organizaciones con configuraciones de CSP más estrictas, hemos documentado todas las instancias de nuestros SVG incrustados (todos los cuales se aplican a través de background-image) para que puedas revisar tus opciones más a fondo.

Según la conversación de la comunidad, algunas opciones para abordar esto en tu propio código base incluyen reemplazar las URL con recursos alojados localmente, eliminar las imágenes y usar imágenes en línea (no es 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.