Icono del sitio Imacreste

Bootstrap: inicio

Iñigo Mezo Alvarez

Vamos a ver como podemos iniciarnos en el diseño web con Bootstrap.

¿QUE ES?

Bootstrap es un framework de front-end (parte visible de una web o aplicación) gratuito  y que su auge consiste en que permite un desarrollo web más rápido y fácil, porque te permite diseñar siguiendo una guía de etiquetas HTML que una vez dominadas te permite dar estilos a tu web de forma más rápida o mantener una web creada con Bootstrap de forma más sencilla, ya que todos los que usan este framework usan las mismas etiquetas, así que su identificación es más sencilla.

De este modo estas etiquetas nos permite establecer diseño a: Tipografías, formularios, botones, tablas, menús de navegación, imágenes, etc. O también nos permite crear la estructura, todo basado en una celda de hasta 12 bloques.

Estas etiquetas están creadas con una visión de crear diseños responsive, con lo que es más rápido crear versiones para: Mvl, Tablets, escritorio, tv, etc.

VENTAJAS

¿COMO USARLO?

Bootstrap es un fichero  CSS que tenemos que llamar desde nuestras páginas y luego  usar sus etiquetas. Para poder usarlo tenemos 2 formas:

Un CDN es «un tipo de infraestructura informática en la que se entrelazan varios ordenadores distribuidos geográficamente en varios data centers. Estos almacenan parte de la información y el contenido de los sitios web y los servirán al usuario final.». Vamos que el fichero Bootstrap está en diferentes servidor a los que podemos llamar, y esta estructura se encarga de servirlo en base a cercanía, cache, etc.

Para ello basta con introducir en nuestros ficheros:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0
.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min
.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/p
opper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.
min.js"></script>

En realidad solo es necesaria la primera llamada (bootstrap.min.css), las 3 últimas se usan para diferentes efectos como por ejemplo Pop Ups.

La única diferencia es que los ficheros deben estar en nuestro propio servidor, y por tanto las urls de los ficheros serán diferentes.

PAGINA BÁSICA CON BOOTSTRAP

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - INICIO</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ejemplo</h1>
<p>Texto del ejemplo.</p>
</div>
</body>
</html>

En este ejemplo cabe destacar 3 cosas:

  1. Cargamos bootstrap.
  2. Indicamos a los navegadores que esta página es responsive y su comportamiento (<meta name=»viewport» content=»width=device-width, initial-scale=1″>)
  3. Usamos un contenedor (<div class=»container»>)

Este container es una etiqueta de Bootstrap y es muy importante ya que se requiere un contenedor para envolver el resto del sitio. Para lo cual tenemos 2 opciones:

La diferencia es que el segundo abarca el 100% de la pantalla.

SISTEMA DE GRILLAS

El sistema de grillas de Bootstrap se separa en 12 columnas o sub-grillas, que podemos usar para la composición de estructuras de nuestra página web. Podemos tener 1 único bloque de 12 columnas, 1 sidebar de 4 columnas y un bloque de contenido de 8, etc.

Por otro lado, podemos indicar el comportamiento responsivo de estas sub-grillas. Tenemos diferentes opciones:

<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

En este caso, la estructura se adaptara en función al tamaño del dispositivo, y será Bootstrap quien decida en que momento pasa los bloques a abajo.

<div class="row">
<div class="col-sm-3">Columna sm3 1</div>
<div class="col-sm-3">Columna sm3 2</div>
<div class="col-sm-3">Columna sm3 3</div>
<div class="col-sm-3">Columna sm3 4</div>
</div>

En este ejemplo, las columnas para dispositivos que miden menos de 576px se mostrara 1 columna por fila… y para tamaños superiores se visualizan 4 columnas por fila.

<div class="row">
<div class="col-md-4">Columna 1</div>
<div class="col-md-8">Columna 2</div>
</div>

En este otro ejemplo, creamos 2 columnas de 4 y 8 sub-grillas de Bootstrap pero solo para tamaños de dispositivo superiores a 768px. Para el resto serán 1 columna por fila.

<div class="row">
<div class="col-md-4 col-sm-3">Columna 1</div>
<div class="col-md-8 col-sm-9">Columna 2</div>
</div>

En este último ejemplo vemos como es posible combinar el comportamiento de las grillas. En este caso cuando el dispositivo es superior a 768px el sidebar o columna pequeña es de 4 sub-grillas pero cuando es entre ese tamaño y 576px es de 3 sub-grillas y finalmente cuando es menor a 576px las columnas se visualizan 1 por línea.

Entender este comportamiento de grillas es básico para crear themes responsivos, y la recomendación es comenzar de pequeño a mayor, por que en el tamaño pequeño es donde tenemos el problema del ancho.

Salir de la versión móvil