Antes de nada vamos a recordar lo que hemos visto hasta ahora en los 2 artículos anteriores sobre Bootstrap.
- En el primer artículo nos centramos en conocer Bootstrap, explicando qué es , qué características tiene y los archivos que los compone.
- En el segundo artículo, creamos nuestra primera versión de página con Bootstrap, así como algunos ejemplos de sitios creados con este framework.
Una vez hecho el repaso de lo que hemos visto hasta ahora, ha llegado el momento de explicar cómo poder montar un sitio web en poco tiempo a nuestro gusto utilizando las ventajas de BootStrap, creando un sitio adaptable a todo dispositivo sin un gran esfuerzo.
Como ya dijimos en su momento, una de las partes importantes del código que tenemos que respetar en Bootstrap es el «viewport» que es el que hará que nuestra web esté preparada para ser Responsive, es decir, adaptable a dispositivos.
«Responsive Web Design (RWD): Es una tendencia en diseño de sitios web para que tu página web pueda ser vista de forma correcta en todo tipo de dispositivos.»
Bootstrap 2 estaba preparado para que los sitios web se adaptaran a los dispositivos, pero en su última versión Bootstrap 3, se creó desde cero pensando en móviles, dándole la mayor importancia a este tipo de dispositivos.
Como ya vimos en el post anterior, para que las páginas tengan un funcionamiento correcto en dispositivos móviles y se muestren correctamente, tenemos que hacer un buen uso del meta «viewport». Este etiqueta tiene dos propiedades que son importantes conocer:
- initial-scale: Como en un dispositivo móvil se puede hacer zoom (por ejemplo con un movimiento de dos dedos), esta propiedad sirve para controlar a que zoom estará inicialmente la página. Aconsejo poner por defecto initial-scale=1
- user-scalable: Permite controlar si el usuario puede hacer zoom o no en la página. Por defecto el valor es «yes», pero es posible que queramos ponerlo a «no» en el caso de que tengamos muy bien adaptado a dispositivos nuestro sitio web.Aconsejo poner por defecto user-scalable=yes ya que puede ser contraproducente restringir funciones al usuario.
Sabiendo esto por ejemplo si queremos deshabilitar el zoom de nuestras páginas, habría que añadir lo siguiente:
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Una de las características más importantes de Bootstrap y es su fácil manejo para crear sitios webs con su sistema de rejilla. Por ponerte un ejemplo antes de entrar en materia, si quieres centrar un sitio web respecto la ventana del navegador, tan solo tienes que incluir tu contenido dentro de un div con la clase «container».
class="container"> <!-- Aqui iría tu contenido --> </div>
Además de viewport, BootStrap también hace uso de las llamadas media-queries para poder dividir en «puntos de ruptura» en los que cambiar nuestra rejilla según el dispositivo con el que se accede a nuestro sitio.
Estos son los media-queries con los que trabaja BootStrap:
/* Dispositivos muy pequeños (teléfonos de hasta 768px de anchura) */
/* No se define ninguna media query porque este es el estilo por
defecto utilizado por Bootstrap 3 */
/* Dispositivos pequeños (tablets, anchura mayor o igual a 768px) */
@media (min-width: @screen-sm-min) { ... }
/* Dispositivos medianos (ordenadores, anchura mayor o igual a 992px) */
@media (min-width: @screen-md-min) { ... }
/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px) */
@media (min-width: @screen-lg-min) { ... }
En ocasiones, también se utilizan las siguientes media queries que definen la propiedad max-width y permiten restringir los dispositivos a los que se aplican los estilos CSS:
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Nota: Fuente sobre media-queries obtenida de LibrosWeb
Sistema de rejillas de Bootstrap
Para seguir avanzando en el diseño de nuestra primera página, es necesario conocer el sistema de rejillas de Bootstrap.
El sistema de rejillas de Bootstrap se basa en 12 columnas que se van escalando según el dispositivo con el que se accede, es decir, crece hasta las 12 columnas según vayamos aumentando el tamaño de la pantalla del dispositivo.
Al fin y al cabo se trata de colocar el contenido dentro de unas filas y columnas, y usar las clases CSS que nos proporciona Bootstrap para poder manipular nuestros diseños.
Estas filas de las que hablo, tienen que estar dentro de un contenedor, que como os he puesto en el ejemplo anterior puede ser la clase «.container«. Si queremos que este contenedor sea de anchura variable, en lugar de poner la clase .container, podemos usar «.container-fluid«. Con esto ya vemos lo sencillo que es diferencias entre un diseño fluido (con anchura variable) o fija.
¿Cómo funciona el sistema de rejillas de BootStrap?
Existen una serie de normas para que BootStrap funciona de forma correcta, que os paso a citar a continuación:
- Definir siempre una fila dentro de un contenedor tipo .container o container-fluid, dependiendo de si lo queremos fluido o fijo, así podremos tener bien alineadas las filas con su padding correspondiente.
- El contenido siempre tiene que ir colocado dentro de las columnas y no en las filas. Es decir, las filas solo se utilizan para estructurar, después en cada una de las filas colocamos nuestra columna donde podremos meter contenido.
- Las columnas se especifican siempre según el total de 12 columnas. Es decir, hay que especificar cuantas de las 12 columnas ocupará. Por tanto si queremos dividir una fila en 3 columnas iguales, se utiliza la clase .col-xs-4 (3×4 = 12).
Sabiendo estas pequeñas normas, podemos hacer maravillas con el código para adaptar nuestro sitio a los distintos dispositivos. Para que veáis un ejemplo de cómo se tiene que crear una página para un dispositivo u otro, me baso en los ejemplos de LibrosWeb:
Ejemplo de rejilla creada con Bootstrap
Usando la clase “.col-md-*.” Esta rejilla se ve verticalmente en dispositivos móviles pequeños o extra pequeños y horizontalmente en un ordenador medio o grande:
class="row"> class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 class="col-md-1">.col-md-1 </div> class="row"> class="col-md-8">.col-md-8 class="col-md-4">.col-md-4 </div> class="row"> class="col-md-4">.col-md-4 class="col-md-4">.col-md-4 class="col-md-4">.col-md-4 </div> class="row"> class="col-md-6">.col-md-6 class="col-md-6">.col-md-6 </div>
Ejemplo de contenedor de anchura variable
Para tener una rejilla de anchura fija en una rejilla de anchura variable ocupando toda la anchura del navegador se ha de cambiar la clase “.container” por la “container-fluid” en aquel elemento que contiene los demás elementos de la rejilla:
class="container-fluid">
class="row">
...
</div>
</div>
Ejemplo de rejilla para móviles y ordenadores
Imaginaos que no queréis que se vea verticalmente en dispositivos pequeños. Para ello utilizaremos a la vez las clases ”.col-xs*” y ”.colo-md-*”
<!-- En los móviles las columnas se muestran verticalmente porque
una de ellas ocupa toda la anchura del dispositivo y la otra
columna ocupa la mitad -->
class="row">
class="col-xs-12 col-md-8">.col-xs-12 col-md-8
class="col-xs-6 col-md-4">.col-xs-6 .col-md-4
</div>
<!-- En un móvil las columnas ocupan la mitad del dispositivo y en un
ordenador ocupan la tercera parte de la anchura disponible -->
class="row">
class="col-xs-6 col-md-4">.col-xs-6 .col-md-4
class="col-xs-6 col-md-4">.col-xs-6 .col-md-4
class="col-xs-6 col-md-4">.col-xs-6 .col-md-4
</div>
<!-- Las columnas ocupan siempre la mitad de la pantalla, tanto en un
móvil como en un ordenador de escritorio -->
class="row">
class="col-xs-6">.col-xs-6
class="col-xs-6">.col-xs-6
</div>
Espero que esta parte del tutorial os haya servido de ayuda. Para el próximo capítulo veremos como resetear, desplazar, anidar, reordenar las columnas para adaptar los diseños a lo que más nos convenga.
