Iniciación a Bootstrap
En este tutorial aprenderemos a dar los primeros pasos en bootstrap 4 para crear páginas web que se adapten a cualquier tamaño de pantalla o dispositivo. Iniciación a Bootstrap
Bootstrap es un framework desarrollado por Twitter para facilitar el diseño web. Permite crear webs responsive de manera sencilla. Utiliza un sistema de grillas (grid system), que se trata de dividir el ancho de la página en columnas dependiendo de la resolución de la pantalla.
Descarga de bootstrap
Lo primero que debemos hacer para empezar a utilizar bootstrap es descargar los archivos Css y JavaScript necesarios. Para ello vamos a la página https://getbootstrap.com/docs/4.0/getting-started/download/ y hacemos click en «Download» en Compiled CSS and JS. Descargaremos la última versión.
Hacemos click en «Download» Compiled CSS and JS‘, para descargar los archivos css y js que vamos a necesitar. Se descargarán en formato .zip
Al descomprimirlos podemos ver que tenemos dos carpetas, una con los archivos Css y la otra con los JavaScript. Son los archivos que tenemos que copiar en la carpeta de nuestro proyecto
Copiar plantilla de bootstrap
Ahora vamos a copiar la plantilla que se encuentra un poco más abajo en la página, hacemos click en «Copy«
En nuestro proyecto crearemos un archivo index.html y en él pegamos la plantilla. Como vemos en los cuadros amarillos se encuentran los enlaces a los archivos css y js en línea
Es conveniente sustituir estos dos enlaces por enlaces a los archivos locales. Esto mejorará la velocidad de carga y además nos permitirá trabajar sin conexión a internet
Para utilizarlos sólo nos queda añadirlos a nuestro proyecto. Aunque hay muchos archivos en las dos carpetas, en principio sólo vamos a utilizar dos: bootstrap.css y bootstrap.min.css Los dos archivos cumplen la misma función. bootstrap.min.css es la versión comprimida de bootstrap.css. Se recomienda utilizar la versión comprimida ya que ocupa un poco menos y nuestra página cargará más rápido. El archivo contiene los estilos de todas las clases predefinidas que podemos utilizar. Añadimos al head de nuestra página el enlace al archivo bootstrap.min.css y ya podemos comenzar
Añadir links a archivos locales de Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1>Esta es mi primera página con Bootstrap</h1>
</body>
</html>
Mi primera página con Bootstrap
Utilizaremos la clase «container» para envolver todo el código en un mismo div. Podemos usar «container» ó «container-fluid», si queremos que el contenido ocupe una parte o todo el ancho de la pantalla.
<body>
<!--Añadimos un fondo al div para distinguirlo mejor-->
<div class="container" style="background-color: #aaa">
<!--Contenido de la página-->
<h1>Esta es mi primera página con Bootstrap</h1>
<p>Ejemplo de la clase container</p>
</div>
</body>
Vemos como el contenido de la página aparece centrado
Si hacemos resize en el navegador podemos comprobar que nuestra página se adapta correctamente con sólo definir la clase «container» Vamos a añadir algunas clases básicas más
<body>
<!--Añadimos un fondo al div para distinguirlo mejor-->
<div class="container" style="background-color: #aaa">
<!--Contenido de la página-->
<!--clase text-center: centra el texto-->
<h1 class="text-center">Esta es mi primera página con Bootstrap</h1>
<!--clase lead: resalta el texto-->
<p class="text-center lead">Ejemplo de la clase container</p>
<!--clase btn: botón-->
<button class="btn">Botón</button>
<!--clase btn-primary: botón primario-->
<button class="btn btn-primary">Botón primario</button>
</div>
</body>
Y veamos el resultado
Sistema de grillas de Bootstrap
Las grillas de Bootstrap nos ayudan a crear un contenido más fluido y adaptable a todos los dispositivos. Se trata de un sistema cómodo y fácil de entender. Se divide el ancho de la pantalla en 12 columnas, de modo que si queremos que un div ocupe todo el ancho le diremos que ocupa 12 columnas y si ocupa sólo la mitad ocupará 6 columnas. Definiremos primero un contenedor de Bootstrap, «container» o «container-fluid».
<body>
<!--Añadimos un fondo al div para distinguirlo mejor-->
<div class="container" style="background-color: #aaa">
<!--Contenido de la página-->
</div>
</body>
Creamos una nueva fila de contenido con sus respectivas columnas
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Vamos a darle un poco de contenido a ver que tenemos por ahora
<body>
<!--Añadimos un fondo al div para distinguirlo mejor-->
<div class="container" style="background-color: #aaa">
<!--Contenido de la página-->
<div class="row">
<div class="col" style="background-color: rgb(130, 167, 130)">
<p>Primera columna</p>
</div>
<div class="col" style="background-color: rgb(221, 221, 115)">
<p>Segunda columna</p>
</div>
<div class="col" style="background-color: rgb(149, 173, 226)">
<p>Tercera columna</p>
</div>
</div>
</div>
</body>
Las columnas se colocan solas sin necesidad de darles un ancho
Además de colocar la clase col dentro de la clase row, también podemos agregarle otras clases para que la página sea responsive. Veamos varios ejemplos:
- xs (extra small)
Actúa en dispositivos de menos de 576 píxels
- sm (small)
Dispositivos entre 576 y 768 píxels
- md (medium)
Todos los dispositivos entre 768 y 992 píxels
- lg (large)
Para todos los dispositivos entre 992 y 1200 píxels
- xl (extra large)
En dispositivos grandes, por encima de los 1200 píxels Veamos como utilizar estas clases
<body>
<!--Añadimos un fondo al div para distinguirlo mejor-->
<div class="container" style="background-color: #aaa">
<!--Contenido de la página-->
<div class="row">
<!--La clase xs no hace falta ponerla porque es por defecto col-->
<div class="col" style="background-color: rgb(130, 167, 130)">
<p>Primera columna.</p>
</div>
<div class="col-sm" style="background-color: rgb(221, 221, 115)">
<p>Segunda columna</p>
</div>
<div class="col-md" style="background-color: rgb(149, 173, 226)">
<p>Tercera columna</p>
</div>
<div class="col-lg" style="background-color: rgb(241, 214, 189)">
<p>Cuarta columna</p>
</div>
<div class="col-xl" style="background-color: rgb(188, 235, 209)">
<p>Quinta columna</p>
</div>
</div>
</div>
</body>
Ahora tenemos 5 col, para ajustarlos a los diferentes tamaños de pantalla. Sin hacer nada más ya tendríamos una página responsive. Ya podemos probar el resultado en el navegador y veremos que según vayamos haciendo la ventana más pequeña, los diferentes divs van pasando a ocupar todo el ancho y se sitúan unos encima de otros
