Bootstrap es uno de los frameworks de HTML, CSS y JavaScript más populares actualmente. Gracias a este framework, desarrollado por Mark Otto y Jacob Thornton de Twitter, podemos crear interfaces ahorrando tiempo al utilizar recursos desarrollados previamente: clases CSS, componentes JavaScript sobre JQuery, repositorios de tipografías y botones, entre otros. Además, Bootstrap es responsive y compatible con los navegadores más utilizados.
Este framework ha ido evolucionando desde 2011, año en el que tuvo lugar su lanzamiento como proyecto Open Source en Github.
Diferencias entre Bootstrap 4 y Bootstrap 5
En este tutorial vamos a centrarnos en Bootstrap 4 por ser la versión más utilizada actualmente. Sin embargo, merece la pena destacar la nueva versión «Bootstrap 5» que ha sido lanzada oficialmente el 5 de mayo de 2021. Algunos de los cambios más destacados son los siguientes:
Diferencias | Bootstrap 4 | Bootstrap 5 |
---|---|---|
Columnas | Tiene 5 niveles (xs, sm, md, lg, xl) | Tiene 6 niveles (xs, sm, md, lg, xl, xxl) |
Colores | Tiene colores limitados | Se agregaron colores adicionales con una paleta de colores mejorada |
Jquery | Tiene jquery y todos los complementos relacionados | Jquery se elimina y se cambia a Vanilla JS |
Internet Explorer | Bootstrap 4 es compatible con IE 10 y 11 | Bootstrap 5 no es compatible con IE 10 y 11 |
Formularios | Los botones de opción y las casillas de verificación tienen un aspecto distinto en diferentes sistemas operativos y navegadores | Ya sea que se trate de cualquier sistema operativo o navegador, el aspecto de los elementos del formulario no cambiará |
Iconos de Bootstrap | Bootstrap 4 no tiene sus propios iconos SVG, tenemos que importar una fuente como FontAwesome | Bootstrap 5 tiene sus propios iconos SVG |
Jumbotron | Soporta | No es compatible con jumbotron |
Card deck | Card deck se utiliza para crear tarjetas con el mismo ancho y alto | Card deck ha sido eliminado en bootstrap 5 |
Navbar | Tenemos la propiedad inline-block y obtendremos el menú desplegable blanco como predeterminado para la clase dropdown-menu-dark | Se elimina la propiedad inline-block y obtendremos el menú desplegable negro como predeterminado para la clase dropdown-menu-dark |
Generador de sitio estático | Bootstrap 4 utiliza el software Jekyll | Bootstrap 5 utiliza el software Hugo |
Cómo descargar e instalar Bootstrap 4
Bootstrap se puede instalar de formas diferentes. En esta sección veremos los dos métodos más utilizados: utilizando su CDN y descargando el código en local. En la página web oficial de Bootstrap (getbootstrap.com) se pueden ver todas las formas de distribución.
1. Forma más sencilla: utilizando CDN
La forma más sencilla de utilizar Bootstrap es utilizando su red de distribución de contenidos o CDN (del inglés Content Delivery Network). El inconveniente es que se necesita Internet para que funcione correctamente. Este método se suele utilizar para realizar pruebas rápidas.
![Cómo descargar e instalar Bootstrap 4 - Eniun (1) Cómo descargar e instalar Bootstrap 4 - Eniun (1)](https://i0.wp.com/www.eniun.com/wp-content/uploads/Bootstrap-1024x541.png)
Para utilizar la CDN de Bootstrap lo único que debemos hacer es copiar en el archivo HTML de nuestro proyecto el código que se indica en el siguiente enlace getbootstrap.com/docs/4.4/getting-started/introduction/. Veamos un ejemplo detallado:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4. Necesita Internet</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"></head><body> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p> <button class="btn btn-primary">dolor atmet</button> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></body></html>
default
2. Descarga del código para desarrollo
Este segundo método es uno de los más utilizados y consiste en la descarga completa del código. De esta forma podemos implementar nuestras páginas de forma local sin necesidad de utilizar Internet.
Pasos a seguir para la inserción del código en nuestra página web:
1. Para descargar Bootstrap debemos acceder a su web oficial: getbootstrap.com/docs/4.4/getting-started/download/
En nuestro caso, vamos a descargar la opción de «CSS y JS compilado»
![Cómo descargar e instalar Bootstrap 4 - Eniun (2) Cómo descargar e instalar Bootstrap 4 - Eniun (2)](https://i0.wp.com/www.eniun.com/wp-content/uploads/Instalar-Bootstrap-1024x738.png)
2. Además de descargar todo el código anterior, tenemos que descargar Jquery y Popper.
Primero descargamos Jquery desde la página oficial: jquery.com/download/ (seleccionar versión comprimida / click derecho/ guardar como). Jquery es una librería que simplifica la tarea de programar en JavaScript ypermite agregar interactividad a un sitio web.
![Cómo descargar e instalar Bootstrap 4 - Eniun (3) Cómo descargar e instalar Bootstrap 4 - Eniun (3)](https://i0.wp.com/www.eniun.com/wp-content/uploads/Instalar-Jquery-con-Bootstrap-1024x593.png)
A continuación descargamos Popper desde su página oficial: popper.js.org (Seleccionar “Install” y después la opción unpkg minified). Popperes unalibreríadeJavascriptpara añadir tooltips y popovers en elementos HTML.
![Cómo descargar e instalar Bootstrap 4 - Eniun (4) Cómo descargar e instalar Bootstrap 4 - Eniun (4)](https://i0.wp.com/www.eniun.com/wp-content/uploads/PopperJS-instalar.png)
El último paso será incluir todos los archivos en nuestro código html tal y como se muestra en el siguiente ejemplo:
- Añadimos el archivo CSS en el head:
- Agregarnos la librería Jquery.
- Incluimos la librería Popper.
- Insertamos el archivo js de Bootstrap.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap descarga de código</title> <link rel="stylesheet" href="css/bootstrap.min.css"></head><body> <button class="btn btn-primary">Mi botón</button> <script src="js/jquery-3.6.0.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script></body></html>
default
Una vez ya tenemos la instalación de Bootstrap de forma local, vamos a ver cómo funciona su famoso sistema de columnas.
Comprueba tu apendizaje