Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

personalizar

Aprenda a crear temas, personalizar y ampliar Bootstrap con Sass, un montón de opciones globales, un amplio sistema de colores y más.

Sass Utilice nuestros archivos Sass de origen para aprovechar variables, mapas, combinaciones y funciones.
Opciones Personalice Bootstrap con variables integradas para alternar fácilmente las preferencias globales de CSS.
Color Conozca y personalice los sistemas de color que admiten todo el conjunto de herramientas.
Componentes Aprenda cómo construimos casi todos nuestros componentes de manera receptiva y con clases base y modificadoras.
Variables de CSS Use las propiedades personalizadas de CSS de Bootstrap para un diseño y desarrollo rápido y con visión de futuro.
Optimice Mantenga sus proyectos optimizados, receptivos y fáciles de mantener para que pueda ofrecer la mejor experiencia.

Visión general

Hay varias formas de personalizar Bootstrap. Su mejor camino puede depender de su proyecto, la complejidad de sus herramientas de compilación, la versión de Bootstrap que está usando, la compatibilidad con el navegador y más.

Nuestros dos métodos preferidos son:

  1. Usando Bootstrap a través del administrador de paquetes para que pueda usar y ampliar nuestros archivos fuente.
  2. Usando los archivos de distribución compilados de Bootstrap o jsDelivr para que pueda agregar o anular los estilos de Bootstrap.

Si bien no podemos entrar en detalles aquí sobre cómo usar cada administrador de paquetes, podemos brindarle orientación sobre el uso de Bootstrap con su propio compilador Sass .

Para aquellos que quieran usar los archivos de distribución, revisen la página de inicio para saber cómo incluir esos archivos y una página HTML de ejemplo. A partir de ahí, consulte los documentos para conocer el diseño, los componentes y los comportamientos que le gustaría usar.

A medida que se familiarice con Bootstrap, continúe 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 usar nuestra creciente lista de propiedades personalizadas de CSS y cómo para optimizar su código al construir con Bootstrap.

CSP y SVG integrados

Varios componentes de Bootstrap incluyen SVG incrustados 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 pueda revisar más a fondo sus opciones.

Según la conversación de la comunidad , algunas opciones para abordar esto en su propia base de código incluyen reemplazar las URL con activos alojados localmente , eliminar las imágenes y usar imágenes en línea (no es posible en todos los componentes) y modificar su CSP. Nuestra recomendación es revisar cuidadosamente sus propias políticas de seguridad y decidir cuál es el mejor camino a seguir, si es necesario.