Bootstrap es el framework más popular de CSS, HTML y JavaScript, que nos permite desarrollar webs que se ajustan a cualquier resolución y dispositivo. En este post me gustaría hablaros de mi experiencia diseñando con Bootstrap 4. Aunque es bastante escueto, como introducción y para tener una idea y una manera de entenderlo creo que puede ayudar bastante, así que no me extiendo más.
Descargando el material necesario
Para Comenzar hay que descargar el material necesario para el correcto funcionamiento del Framework. Podríamos usar 2 opciones:
- La primera es CDN (Content Delivery Network) que es la que coge todo el código directamente de sus repositorios.
- La segunda es descargar nosotros los archivos a nuestro ordenador y luego linkarlos en el index.html.
Yo personalmente prefiero usar la segunda, aunque la primera es más limpia y rápida, dependemos de internet. De la otra forma, lo tenemos en nuestro disco local y siempre nos va a funcionar.
Así que lo primero que hay que hacer es descargar los archivos que se necesitan.
Por una parte, están las librerías de Bootstrap, después hay que descargar jQuery y Popper.
Para descargar Bootstrap 4 podemos ir a este enlace:
https://getbootstrap.com/docs/4.4/getting-started/download/
y descargamos la versión Compiled CSS and JS
Para descargar jQuery lo hacemos desde este enlace:
Seleccionamos versión comprimida / click derecho/ guardar como.
Y finalmente descargamos Popper:
https://unpkg.com/@popperjs/core@2
Seleccionamos todo y lo copiamos. Después lo pegamos en un documento que se llame popper.js para posteriormente colocarlo en la carpeta js de nuestro proyecto.
Una vez tenemos todo, se crea una carpeta con el proyecto y se descomprime la descarga de y ya de paso se puede crear el archivo index.html. Al mismo tiempo se crean las carpetas js y css. En la carpeta de bootstrap/dist, encontraremos dos carpetas, js y css, dentro de las carpetas habra una versión bootstrap.min.extension js o css, que es la versión minificada. Cogeremos cada uno y lo meteremos en las carpetas correspondientes de nuestro proyecto. Dentro de la carpeta css el bootsrap.min.css y dentro de la carpeta js alojamos el archivo bootstrap.min.js, popper.js y jquery.js.
Vamos usar SASS para ahorrarnos algo de código en CSS. Pero para usar SASS os recomiendo que ojeéis algún tutorial porque es algo extenso desde la instalación hasta el uso final en el proyecto. Aunque crearemos un main.css dentro de la carpeta css y podemos modificar los estilos ahí mismo SASS nos simplifica mucho el trabajo así que os dejo el enlace para que le echéis un vistazo:
Un poquito de Contenido y Sintaxis
En la página de Bootstrap encontraremos todos los componentes que nos facilita Bootstrap 4. También podemos añadir otras funcionalidades dependiendo de la capacidad que tengamos para desarrollar nosotros mismos con JavaScript. Pero no nos vamos a engañar, encontramos de todo para facilitarnos mucho el trabajo y poder crear una página web muy competitiva. Os dejo el link:
https://getbootstrap.com/docs/4.4/components/alerts/
Dentro de la página de Bootsrap tenemos las pestañas de:
- Getting Started
- Layout
- Content
- Components
- Utilities
- Extend
- Migration
- About
Es importante mirarse bien la documentación para entender después por ejemplo porque un div con la class container-fluid hace el 100% de ancho en todos los breakpoints responsive, es decir hará el 100% de ancho en móvil y en escritorio. Para esto, dentro de la pestaña Layout en Containers nos dejan una tabla con los respectivos formatos para el responsive de los contenedores:
Un par de shoots sobre la Sintaxis
Para que entendáis los breakpoints por defecto que tenemos en Bootstrap son:
- xs, que equivale a Extra-small. Breakpoint en menos de 576px
- sm, que equivale a Small. Breakpoint a partir de 576px
- md, que equivale a Medium. Breakpoint a partir de 768px
- lg, que equivale a Large. Breakpoint a partir de 992px
- xl, que equivale a Extra-large. Breakpoint a partir de 1200px en adelante
Es sencillo la verdad y lo mejor es que vale para todos los elementos. Por ejemplo en las columnas dentro de una fila.
<div class=”col-md-4”> Contenido </div>
Con este ejemplo le estoy diciendo que hasta que llegue a md que equivale a 768px se comporte de la forma en la que viene por defecto, que es xs, que equivaldría a un display block. A partir de 768px lo que hará será forzar que las columnas se coloquen en filas de 4 de tal forma que si yo tengo 12 cajas, me creará 3 filas de 4.
Si no escribiera este código lo que haría sería colocar las cajas una al lado de otra en función del ancho de nuestro navegador hasta que no quepan y después, dependiendo de si tenemos un flex-wrap o no, haría un wrap y seguiría debajo o bien se esconderían las cajas fuera de nuestra vista en la derecha del navegador. Parece lioso pero es muy fácil de entender si se practica.
Otra cosa que me llamo la atención de la sintaxis fue la de los colores. Simplemente escribiendo una clase ya tenemos unos colores predefinidos que además podemos modificar con SASS.
Los colores son los siguientes:
- Primary (Azul Claro)
- Secondary (Gris)
- Succes (Verder claro)
- Danger (Rojo Claro)
- Warning (Naranja claro)
- Info (Turquesa tirando a gris)
- Light (Gris claro)
- Dark (Gris oscuro)
Quedaría así, como en el ejemplo de la página de Bootstrap 4:
La verdad es que me podría tirar días explicando el contenido, layout, etc. Pero va a ser que no, ya que es muy sencillo y con que lo ojeéis por encima un poco os vais a dar cuenta de que está todo muy bien documentado y es muy fácil de comprender. Por eso os recomiendo que ojeéis la pagina con todo el contenido porque es muy fácil e intuitivo.
https://getbootstrap.com/docs/4.4/getting-started/introduction/
Iniciando un proyecto básico
Y digo básico porque apenas he tenido tiempo de desarrollar algo muy completo, pero si me ha servido para darme cuenta de que no solamente no tenemos que controlar mucho de JavaScript si no que el ahorro de tiempo en HTML y CSS es muy notable y además el responsive es bastante sencillo.
Para empezar se crea el Index.html y se enlazan todas las hojas, tanto las de estilo como las de JavaScript. Es importante seguir un orden concreto. Así que os dejare el código con el orden que hay que seguir:
<meta name="description" content="Tu contenido">
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<title> Tu contenido </title>
Después,meta name=»description», title, etc. Y ahí, ya se pone uno con el body, empezando por la Cabecera (Header). Vamos a coger algunos ejemplos básicos de Bootstrap pero hay que comprender bien el contenido.
En la misma página de bootstrap dentro del apartado de Components tenemos ejemplos de todas las funcionalidades que nos ofrece Bootstrap. En este proyecto simplemente copié el código de ejemplo y lo modifiqué para ponerlo a mi gusto. Lo que serían colores, tamaños, luego el responsive, etc.
Por ejemplo, para la cabecera, cogí el código de Navbar que más me gustaba, en mi caso en esta ocasión fue justamente el primero que sale, pero eso va en función de las necesidades que tengáis.
Así es el código original y debajo el de mi proyecto:
De esta forma me quedó a mi una vez modificada:
Como veis es prácticamente igual salvando que yo le quité el campo de búsqueda, cambié el color y modifique la X del cierre en el menú hamburguesa. A parte le hice algunas modificaciones más, pero aquí es donde te das cuenta realmente que el ahorro de trabajo sobretodo en Java Script es espectacular.
Después se trata de ir diseñando, creando el main y el footer con todos los recursos que tenemos dentro del apartado components. Yo os aconsejo que ojeéis primero los componentes y después diseñéis una página en función de lo que habéis podido ver y de los conocimientos que tengáis de HTML, CSS y JavaScript. Os daréis cuenta que el ahorro de tiempo es brutal.
En el proyecto que hice por primera vez trabajé con un Menú top-header, un Navbar, un Carousel, Cards para servicios y estudios, un Acordeón para las preguntas frecuentes y otro Carousel para los testimoniales. Si queréis ver más sobre el proyecto podéis visitar mi portfolio aquí. Probad el responsive, veréis que es muy suave y funciona muy bien.
Finalizando el Proyecto
No mucho más. Solo aconsejaros que preparéis bien las carpetas, que comprimáis al máximo las imágenes, que le hagáis seo en la medida de lo posible y si queréis un lugar donde poder subir vuestro proyecto free podéis usar Surge.sh.
Es un host gratuito que te permite subir tus proyectos con una dirección web personalizada. Si queréis saber más visitar este enlace y mirad el video!!
Concluyo
El ahorro de tiempo que conseguimos con este Framework es muy notable, tanto en funciones y eventos de JavaScript como en el tema del responsive. Recomiendo 100% usarlo para el desarrollo de páginas web. Si eres un diseñador de Front-End, creo que es imprescindible que sepas manejarlo para poder acabar proyectos en estos tiempos que corren donde todo el mundo tiene mucha prisa.
Y vosotros? queréis dejarnos alguna experiencia vuestra con Bootstrap 4 en los comentario? estaré encantado de leeros!!
