Web.CSS.BootStrap.
Bootstrap es un Framework CSS gratuito para facilitar el desarrollo web con el que se puede modificar tipografías, formularios, botones, tablas y todo tipo de elementos HTML para darle un aspecto más bonito, limpio y sobre todo Responsive para cualquier dispositivo que vayamos a usar en nuestro proyecto.
Configuración importante en HTML.
Se deberá configurar algunas variables en HTML para ir preparándolo para trabajar con BootStrap.
Asegurarde de tener siempre la etiqueta de HTML5.
<!doctype html>
<html lang="es">
...
</html>Para asegurarse de un correcto funcionamiento para adaptación de diferentes dispositivos, es decir el responsive, se debe añadir algunas variables;
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">No hace falta aprenderse esta configuración, editores de programación como Atom, Visual Studio Code o entornos de desarrollo como puede ser Eclipse, Aptana…etc, te configuran estas variables automáticamente como plantilla básica de HTML.
Ahora toca cargar las librerías necesarias para que BootStrap funcione correctamente.
CSS. Esta librería debe ponerse siempre en el <head> de nuestro documento HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">JS. Son librerías para Java Script. Se deben poner siempre al final del documento, antes del cierre de la etiqueta <body>.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>Estas librerías las he copiado de la página oficial, lo correcto es siempre copiarlo de ahí, por si cambia algo de la url por temas de actualizaciones y demás configuraciones.
También se puede descargar directamente y almacenarla en nuestro hosting, pero yo creo que no es recomendable, ya que no entrarán nuevas actualizaciones y mejoras. Siempre se debe usar la fuente original.
BootStrap está construido con flexbox. ¿Esto que es? Es un sistema de rejillas o cajas el cual, todo se hace a base de etiquetas <div> de forma que el ancho de la página máxímo son de 12 columnas. Se pueden hacer todas las combinaciones que quieras pero sin superar ese límite, sea cual sea el dispositivo con el que estemos trabajando.
Este maravilloso Framework nos va ahorrar “picar” mucho código para hacer muchísimas cosas y para ello sólo se usan clases y él se encarga de hacer todo el trabajo.
Vamos a empezar con lo más básico:
<div class="container-fluid">
<p style=background-color:grey>Una rejilla que ocupa todo el ancho del a página.</p>
</div>- La clase .container-fluid crea un rejilla o bloque que ocupa todo el ancho de la página, es decir 12 columnas.
<div class="container">
<p style=background-color:grey>Una rejilla no ocupa todo el ancho de la página, ya que deja márgenes a ambos lados.</p>
</div>- La clase .container es una rejilla de ancho fijo y no abarca todo el ancho de la página dándole un margen a ambos lados.
Puntos de ruptura.
Los puntos de ruptura son clases que usaremos para cambiar el tamaño de los elementos según el disposistivo que estemos usando, es decir el responsive. Veamos los tipos que hay;
.col-xs-* Dispositivos inferiores a 576 px.
.col-sm-* Dispositivos igual o superior a 576.
.col-md-* Dispostivos igual o superior a 768
.col-lg-* Dispositivos igual o superior 992
.col-xl-* Dispositivos igual o superior a 1200 px
Vamos ver un ejemplo y vamos despedazando lo que hace;
<div class="row">
<div class="col bg-primary">.col</div>
<div class="col bg-warning">.col</div>
<div class="col bg-primary">.col</div>
</div>- La clase .row se utiliza para hacer una fila, de forma que este ejemplo se crea una fila en la que metemos 3 columnas.
- La clase .col sirve parar diferentes columnas del mismo tamaño seas cual sea el dispostivo que vayamos a usar.
<div class="row">
<div class="col-sm bg-primary">.col-sm</div>
<div class="col-sm bg-warning">.col-sm</div>
<div class="col-sm bg-primary">.col-sm</div>
<div class="col-sm bg-warning">.col-sm</div></div>En este ejemplo estamos usando la clase .col-sm, es decir, vamos a crear columnas responsives de forma que van a ser iguales mientras que sean de 576 px en adelante. Si se usara en dispostivos sm, md, lg y xl las columnas se adaptarían. Al no ponerle anchura alguna, boostrap se encarga de todo y le coloca un ancho automático a cada columna.
¿Que curre si es inferior a 576 px? Aquí es donde existe la diferencia con la clase .col. En este ejemplo concreto cuando llegara a dispositivos xs usaría las 12 columnas, es decir, se apilarán las columnas una debajo de la otra.
<div class="row">
<div class="col-sm-2 bg-primary">.col-sm-2</div>
<div class="col-sm-2 bg-warning">.col-sm-2</div>
<div class="col-sm-4 bg-primary">.col-sm-4</div>
<div class="col-sm-4 bg-warning">.col-sm-4</div>
</div>Se pueden combinar tamaños con los puntos de ruptura. En este ejemplo usamos dos columnas de 2 y otras dos de 4 para así llegar al máximo de columnas disponibles en el ancho de página.
Ocurriría como en el ejemplo anterior, si es igual o superior al tamaño sm respetaría el ancho de las columnas, pero si es inferior se apilan una debajo de la otra.
Esto de los tamaños, anchos y demás se pueden mezclar como uno quiera. Vamos a ver un ejemplo más complicado y lo analizamos;
<div class="row">
<div class="col-12 col-md-8 bg-primary">.col-12 .col-md-8</div>
<div class="col-6 col-md-4 bg-warning">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 col-md-4 bg-primary">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 bg-warning">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 bg-primary">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 bg-primary">.col-6</div>
<div class="col-6 bg-warning">.col-6</div>
</div>- En el primer .row; Mientras que sea igual o superior a 576 px se mostrará en 8 columnas. Ahora bien cuando sea inferior a 576 será de 12 columnas.
En este ejemplo el .col-12 nos lo hemos podido ahorrar, ya que por defecto cuando es el tamaño xs booostrap lo pone en 12 columnas de forma que queden apiladas una debajo de otra. - En el segundo .row; Mientras que sea igual o superior a 576 px se mostrará las columnas a 4, a excepción de que sea inferior que lo hará a 6 columnas.
- En el tercer .row; Siempre será 6 columnas sea cual sea el dispositivo que vayamos a usar.
Bootstrap funciona como las tablas HTML, no puede haber filas sin que existan columnas y viceversa, es decir, si hacemos una fila, dentro de ésta deben haber columnas para organizar su contenido.
Este framework está diseñado para usar CSS lo menos posible, pero siempre se debe retocar algo de aquí, algo de allá y ajustarlo a nuestro gusto. Lo más recomendable es siempre modificar y probar.
Existen muchas otras cosas clases que podemos usar en nuestra página. Se puede curiosear por los menús de la página oficial.
En estos ejemplos yo he estado usando la clase .bg-primary y .bg-warning para darle un color de fondo a cada celda. Lo encontré en “Utilities/Color”. También existe un buscador para encontrar lo que necesitemos.
Existen clases para todo, por ejemplo para formularios;
La mayoría de las veces sólo es copiar/pegar y adaptarlo un poco a nuestro sitio y poco más. Curioseen un poco no les desfraudará y le ahorrará mucho trabajo.
