Frameworks de diseño web responsive
04/12/2019
Sistema de columnas y contenedores o rejillas de Bootstrap 4
05/12/2019
Tabla de contenidos
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.
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:
- Se pasa de jQuery a Vanilla JavaScript o JavaScript Puro.
- Se retira el soporte para Internet Explorer 10 y 11, Microsoft Edge Legacy, y versiones inferiores a: Firefox 60, Safari 10 y Chrome 60.
- El testing de infraestructura pasa de QUnit a Jasmine.
- Inclusión de un nuevo set de iconos SVG y nuevas propiedades de CSS.
- API mejorada.
- Mejora del sistema de grid.
- Creación de la sección de formularios, con nuevos formularios incluidos.
- Implementación de Dart Sass.
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.
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/. Aquí tienes un ejemplo detallado:
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»
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 y permite agregar interactividad a un sitio web.
A continuación descargamos Popper desde su página oficial: popper.js.org (Seleccionar “Install” y después la opción unpkg minified). Popper es una librería de Javascript para añadir tooltips y popovers en elementos HTML.
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 aprendizaje
¿Cuándo se creó Bootstrap?
En 2011 por Mark Otto y Jacob Thornton
¿Qué beneficios aportó Bootstrap al desarrollo de proyectos web?
Selecciona 2 respuestas