Personalizar
Aprende a crear temas, personalizar y ampliar Bootstrap con Sass, un montón de opciones globales, un amplio sistema de colores y más.
😎 Esta traducción es parte del proyecto esdocu.com.
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 usando, la compatibilidad con el 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 nuestros 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 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í, consulta los documentos para conocer el diseño, los componentes y los comportamientos que te gustaría usar.
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 cambiar nuestro sistema de color, 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.
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 puedas revisar más a fondo sus opciones.
- Accordion
- Botón de cierre (usado en alerts y modals)
- Checkboxes y botones radio de formulario
- Switches de formulario
- Iconos de validación de formulario
- Menús de selección
- Controles de Carousel
- Botones de Navbar
Según la conversación de la comunidad, algunas opciones para abordar esto en tu propio código base incluyen 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.
😎 Esta traducción es parte del proyecto esdocu.com.