Personalizar Bootstrap

Bootstrap

personalización y plugins

01

PERSONALIZAR BOOTSTRAP

SAAS

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.

cOMO PERSONALIZAMOS

• La forma más fácil, creando un nuevo archivo css y ponerlo debajo del llamado al css de Bootstrap, luego:

- Redefinir los estilos de las clases de Bootstrap. - Agregando junto a las clases de Bootstrap, nuevas clases que re-definan los estilos

• La forma más difícil, usando un pre-procesador como SASS (https://sass-lang.com/), que nos convierte CSS en un “lenguaje de programación” y tener estilos css más ordenados y con funciones que sean reutilizables, entre otras cosas.

Sass y Bootstrap

Sass (Syntactically Awesome Style Sheets) es un preprocesador de CSS que extiende la funcionalidad de los estilos CSS convencionales. Proporciona características adicionales y una sintaxis más avanzada para facilitar el desarrollo y mantenimiento de hojas de estilo.Bootstrap, por otro lado, es un framework CSS popular que facilita la creación de diseños responsivos y sitios web con una apariencia profesional y moderna. Bootstrap utiliza CSS como su lenguaje base para definir los estilos y componentes.

configuración de saas

Instalar el siguiente plugin en VSCode

Descargamos los archivos de Bootstrap sin compilar:

configuración de saas

Generamos la siguiente estructura de carpetas, descomprimimos el RAR descargado y renombramos la carpeta a “bootstrap” y la guardamos en la carpeta “libs”.

configuración de saas

Buscamos el plugin anteriormente instalado, y le damos clic al icono de “La ruedita”, luego a “Extension Setting”.

configuración de saas

Hacer clic en el icono marcado con rojo.

configuración de saas

Agregar líneas desde la línea 24 a la 36, como se ve en la imagen.

configuración de saas

Agregar la siguiente línea en el archivos sass que está dentro de la carpeta “scss” y que se llama custom.scss

configuración de saas

En la parte inferior de VSCode, hacer clic en “Watch Sass”, esto compilará los archivos de Bootstrap.

configuración de saas

Nuestro archivo index.html, debe llamar a los archivos compilados

configuración de saas

Si abrimos el index.html en el navegador, podemos ver que se compiló correctamente Bootstrap

configuración de saas

Para saber que variables de Boostrap modificar, vemos la documentación en la sección de customización:

configuración de saas

IMPORTANTE: Mantener el Watcher de SASS corriendo

Como personalizar un botón

¡GRACIAS!