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
- La curva de aprendizaje, si ya conoces html y css, es muy rápida. Solo hay que conocer el nombre de las etiquetas y que hacen.
- Se consiguen diseños responsive con pocas etiquetas extra. tanto para móviles como tablets y versión escritorio o incluso TV. De hecho la construcción se basa en 1º versión móvil e ir creciendo que es como debe ser, ya que es donde está la limitación por espacio.
- Es compatible con las últimas versiones de los navegadores: Chrome, Firefox, IE 10, etc. Es cierto que con versiones antiguas de IE puede dar problemas, pero creo que hay que olvidarse de ellas y solo si es necesario hacer uso de trucos.
¿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:
- Incluir Bootstrap 4 desde un CDN.
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.
- Descargar Bootstrap 4 desde getbootstrap.com
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:
- Cargamos bootstrap.
- Indicamos a los navegadores que esta página es responsive y su comportamiento (<meta name=»viewport» content=»width=device-width, initial-scale=1″>)
- 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:
- <div class=»container«>
- <div class=»container-fluid«>
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:
- .col-.Para dispositivos superiores a 1px. (vamos para todos los tamaños)
- .col-sm-. Para dispositivos superiores o iguales a 576px.
- .col-md-. Para dispositivos superiores a o iguales a 768px.
- .col-lg-. Para dispositivos superiores a o iguales a 992px.
- .col-xl-. Para dispositivos superiores.
<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.
Deja una respuesta