Bootstrap 4: Introducción e instalación

Boostrap 4 es un framework para desarrollo web, con el podemos crear multitud de elementos para nuestros proyectos como por ejemplo:

  • tipografías
  • formularios
  • botones
  • sistema de regillas
  • navegacion
  • cuadros

Para aquellos que estén familiarizados con la versión 3, que es la que casi todos hemos usado, se darán cuenta de que han cambiado muchísimas cosas y por ello creo que es necesario escribir este curso.

Se ha reescrito desde cero utilizando nuevas tecnologías, como ECMAScript 6 como estandard de javascript, un cambio de less a sass. Han modificado muchos componentes tipo las tarjetas, modales, tooltips…

Esta es la razón principal de que no haya retrocompatibilidad con Boostrap 3, pero como veremos se han mejorado muchas cosas en esta nueva versión.

Antes de empezar podemos ver la documentación oficial de bootstrap 4 por si queremos profundizar más.

Instalación

Para la instalación de bootstrap 4 debemos de ir a su página oficial y una vez allí tenemos la opción o de descargar la version actual o de utilizar el CDN, ya es cuestión de como queramos que este en nuestros proyecto.

Yo personalmente prefiero el CDN pero se pueden descargar los archivos js y css compilados y enlazarlos como archivos normales en el head de nuestra web.

Si queremos usar el CDN solo tenemos que añadir las siguientes etiquetas en nuestro código:

<!--Introducir el css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!--Introducir el javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Con esto ya tenemos lo necesario para empezar a trabajar con bootstrap, tan solo habría que añadir los puntos de ruptura que tiene esta versión para poder trabajar, sobre todo cuando necesitamos hacer mediaqueries para nuestro proyecto:

 

Clase Tamaño
col 575*600
sm 767*600
md 971*600
lg 1199*690
xl 1280*690

Con esto ya estamos listos para aprender a utilizar este maravilloso framework!!!