Web responsive utilizando Bootstrap

Bootstrap es un framework front-end de HTML+CSS+JS que facilita la tarea de hacer webs responsive especializado en móviles (celulares). Es de por lejos el más utilizado en internet y fue desarrollado por Twitter para su capa de presentación. Web oficial: http://getbootstrap.com

En este artículo veremos como es su sistema de grilla, es el tema esencial para comenzar a utilizarlo.

Configuración

Antes de comenzar hay que colocar el framework en nuestro HTML, podemos ver la guía oficial para más opciones (por ejemplo si utilizas un gestor de paquetes como npm, Bower o Composer), pero la forma más sencilla de comenzar es incluyendo el CSS y JS de Bootstrap directo de su CDN (Content Delivery Network) colocándolo en el <HEAD>:

 

<!DOCTYPE html> <!-- el doctype es muy importante, nunca lo olvides -->
<html>
    <head>
        <!-- Incluir CSS bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Tema básico, es opcional pero recomendable -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Incluir Javascript de Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body>
    </body>
</html>

Introducción a la grilla de Bootstrap

El framework divide el diseño en 12 columnas imaginarias (es un numero muy divisible) y nosotros vamos colocando el contenido en estas columnas. Lo importante, es que podemos decidir cuantas columnas ocupa el contenido según el tamaño del dispositivo, lo que hace que sea responsive. Por ejemplo, tenemos una web con 3 productos y queremos mostrarlos en 3 columnas que sean del 33% del contenido cada una debemos ocupar 4 columnas con cada contenido; Otro ejemplo es un texto principal a la izquierda de la pantalla y una columna más pequeña con información extra, podemos hacer el contenido principal de 8 columnas y el secundario de 4. Con este principio podemos ir elaborando nuestra web:

bootstrap-grid

Las columnas están dentro de filas, cada fila puede tener tantas columnas y del tamaño que sean siempre y cuando sumen como máximo 12, si sumamos más, las columnas sobrantes caerán y flotaran a izquierda y esto es lo que nos permitirá la “responsividad”. Las filas son como un corte para volver a dividir en columnas. Si tenemos que las columnas son de diferente altura, cuando comienza una nueva fila, quedarán espacios debajo, pero mejor explicarlo en un ejemplo.

Ejemplo práctico

Para ilustrar mejor como se comporta la grilla creemos un simple diseño web, en este caso, inventaremos una posible web de este blog:

 

ejemplo-bootstrap-limpio

 

Descompongamos la web al sistema de columnas y filas de bootstrap, en este caso las columnas en azul y las filas en rojo.

 

ejemplo-bootstrap-guias

 

Ahora podemos ver bien como se descompone la web definiendo las filas y columnas:

1- Una fila de encabezado (Header): con 3 columnas de tamaño 4 para los menús y el logotipo.

2- Una fila para los detalles del artículo: con 4 columnas de tamaño 2.

3- Una fila para el contenido principal: con 2 columnas, una de tamaño 8 y otra de tamaño 4.

4- Una fila para los botones de atrás y adelante: con 3 columnas, una de tamaño 3, una vacía de tamaño 2 y una de tamaño 3.

5- Una fila para el pie (Footer) de la web: con 2 columnas, una de tamaño 8 para el copyright y logo y otra de tamaño 4 para las redes sociales.

Ahora detectamos los componentes del DOM necesarios (en este caso de ejemplo utilizaremos DIVs) mostrándolos en color lila:

 

ejemplo-bootstrap-guias

 

Aplicando la grilla de Bootstrap

Para aplicar Bootstrap primero necesitamos saber cuales son las clases CSS que debemos utilizar, aquí las principales y que más utilizarás:

.container {} /* define un contenido bootstrap con un pequeño margen cuando es posible */
.container-fluid {} /* define un contenido bootstrap al 100% del ancho de la ventana */
.row { } /* es un conjunto de columnas y siempre va dentro de un .container o .container-fluid */
.col-xs-[cantidad] {} /* columna de un tamaño [cantidad] para un dispositivo muy pequeño (movil) */
.col-sm-[cantidad] {} /* columna de un tamaño [cantidad] para un dispositivo pequeño (iPhone) */
.col-md-[cantidad] {} /* columna de un tamaño [cantidad] para un dispositivo mediano (Tablet) */
.col-lg-[cantidad] {} /* columna de un tamaño [cantidad] para un dispositivo grande (PC Escritorio) */
.col-xl-[cantidad] {} /* columna de un tamaño [cantidad] para un dispositivo muy grande (Pantallas muy grandes) */
.hidden-xs {} /* ocultar el elemento para un dispositivo muy pequeño (movil)  */
.hidden-sm {} /* ocultar el elemento para un dispositivo pequeño (iPhone)  */
.hidden-md {} /* ocultar el elemento para un dispositivo mediano (Tablet)  */
.hidden-lg {} /* ocultar el elemento para un dispositivo grande (PC Escritorio)  */
.hidden-xl {} /* ocultar el elemento para un dispositivo muy grande (Pantallas muy grandes)  */

 

Ahora podemos crear el código que crea esta disposición, que crearemos para dispositivos medianos (md):

 

<!DOCTYPE html>
<html>
    <head>
        <!-- Incluir CSS bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Tema básico, es opcional pero recomendable -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Incluir Javascript de Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body class="container">

        <div class="encabezado row">
            <div class="menu-izquierda col-md-4"></div>
            <div class="logotipovardump col-md-4"></div>
            <div class="menu-derecha col-md-4"></div>
        </div>
        <div class="detalles row">
            <div class="autor col-md-2"></div>
            <div class="categoria col-md-2"></div>
            <div class="fecha col-md-2"></div>
            <div class="comentarios col-md-2"></div>
            <div class="vacio col-md-4"></div> <!-- esta columna no es necesaria -->

        </div>
        <div class="contenido row">
            <div class="articulo col-md-8"></div>
            <div class="similares col-md-4"></div>
            
        </div>
        <div class="botones row">
            <div class="nuevo col-md-3"></div>
            <div class="vacio col-md-2"></div><!-- esta columna SI es necesaria, para ocupar el espacio -->
            <div class="antiguo col-md-3"></div>      
            <div class="vacio col-md-4"></div> <!-- esta columna no es necesaria -->  

        </div>
        <div class="pie row">
            <div class="copyright col-md-8"></div>
            <div class="redes-sociales col-md-4"></div>
        </div>


    </body>
</html>

Haciendo que la web sea responsive

La web ya dispone de una disposición definida por Bootstrap, pero ahora necesitamos que se comporte diferente según el dispositivo. Los tamaños de los dispositivos (xs, sm, md, lg y xl) nos permiten la flexibilidad para que la web se comporte diferente pero de manera controlada. En cada elemento del DOM podemos especificar el tamaño de la columna según el dispositivo de esta manera:

    <div class="col-xs-12 col-md-6"></div>

Así obtendríamos un div que ocupe el 100% del ancho de la pantalla cuando es un móvil y el 50% cuando estamos en una tablet.

No hace falta definir todos los tamaños

Una vez definimos un tamaño, por ejemplo md, esto significa que para los mas grandes se aplicará lo mismo a menos que se defina otra clase que especifique lo contrario. En el ejemplo anterior, el div será de tamaño 12 tanto para xs y sm y será de tamaño 6 para md, lg y xl.

Ahora bien, definamos como queremos que se comporte la web cuando el dispositivo es pequeño:

1- El encabezado debe aparecer cada columnas una arriba de la otra.

2- Los detalles deben aparecer en lugar de los cuatro seguidos de dos en dos.

3- El contenido debe aparecer con el articulo completo y debajo los similares

4- Los botones se mantienen igual

5- El footer, las redes sociales van debajo

 

Así debería quedar en movil:

 

template-bootstrap-movil

 

Finalmente agregaremos al código anterior las clases para que la web se adapte a un tamaño de móviles y al fin tendremos una web responsive!

Recuerda que solo estamos definiendo el Layout (la disposición), los estilos que apliques para que el texto esté centrado, tipografías, etc. Debes definirlo tu mismo.

 

<!DOCTYPE html>
<html>
    <head>
        <!-- Incluir CSS bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Tema básico, es opcional pero recomendable -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Incluir Javascript de Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body>

        <div class="encabezado row">
            <div class="menu-izquierda col-md-4 col-xs-12"></div>
            <div class="logotipovardump col-md-4 col-xs-12"></div>
            <div class="menu-derecha col-md-4 col-xs-12"></div>
        </div>
        <div class="detalles row">
            <div class="autor col-md-2 col-xs-6"></div>
            <div class="categoria col-md-2 col-xs-6"></div>
            <div class="fecha col-md-2 col-xs-6"></div>
            <div class="comentarios col-md-2 col-xs-6"></div>
            <div class="vacio col-md-4 hidden-xs hidden-sm"></div> <!-- esta columna no es necesaria -->

        </div>
        <div class="contenido row">
            <div class="articulo col-md-8 col-xs-12"></div>
            <div class="similares col-md-4 col-xs-12"></div>
            
        </div>
        <div class="botones row">
            <div class="nuevo col-md-3 col-xs-6"></div>
            <div class="vacio col-md-2 hidden-xs hidden-sm"></div><!-- esta columna SI es necesaria, para ocupar el espacio -->
            <div class="antiguo col-md-3 col-xs-6"></div>      
            <div class="vacio col-md-4 hidden-xs hidden-sm"></div> <!-- esta columna no es necesaria -->  

        </div>
        <div class="pie row">
            <div class="copyright col-md-8 col-xs-12"></div>
            <div class="redes-sociales col-md-4 col-xs-12"></div>
        </div>


    </body>
</html>
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on StumbleUpon
Pablo Oneto

Soy un desarrollador de software web especializado en PHP.

Deja un comentario