Para crear una web responsive, es decir, que se ajuste automáticamente a las distintas resoluciones de pantalla de los dispositivos en los que se va a mostrar, vamos a utilizar el framework Bootstrap.
Ya os contamos en el podcast “Que es Bootstrap” lo que se puede hacer con este framework y como añadirlo a nuestro proyecto con las diferentes opciones que tenemos. Para este ejemplo vamos a utilizar la versión precompilada y vincularemos nuestra página web con la versión estable más reciente:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title>Ejemplo Grid</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> |
Añadimos entre las etiquetas head el css de Bootstrap y antes de cerrar la etiqueta body los scripts que necesitamos. Estos scripts los podríamos poner también entre las etiquetas head después del archivo css. Pero lo ponemos así para que primero se cargue el HTML y luego los scripts mejorando el tiempo de carga de la pagina web.
En el articulo primeros pasos con Bootstrap ya vimos que toda aplicación Bootstrap debe tener un contenedor que contenga toda la aplicación web. Este es el primer paso para realizar nuestra web responsive.
También en ese articulo os mostramos como hace la magia Bootstrap. Para utilizar este framework tan solo debemos escribir en el atributo class de la etiqueta que queramos modificar o añadir estilo una palabra reservada de este framework. Tan solo tenéis que fijaros en la linea anterior de código como lo realizamos. Con este valor en el atributo class centramos toda nuestra web y dejamos margenes a los lados que dependerá del tamaño de pantalla en el que visualicemos la aplicación.
Una vez definido el contenedor de nuestra aplicación, pasamos a implementar los elementos que vamos a tener en nuestra web. Bootstrap trabaja con una cuadricula de 12 columnas, llamado grid, nosotros debemos dividir nuestro diseño de pantalla en estas doce columnas y decidir cuantas columnas ocupan los elementos que vamos a ir introduciendo.
Así, iremos creando contenedores con un tamaño de columnas. Por ejemplo queremos dividir la pantalla en tres secciones, que tienen 4, 3 y 5 columnas de tamaño respectivamente, lo haríamos de la siguiente forma:
1 2 3 4 5 6 | <div class="container"> <div class="col-md-4">Columna 1</div> <div class="col-md-3">Columna 2</div> <div class="col-md-5">Columna 3</div> </div> |
Como veis lo hacemos con el valor col-md-*, donde en el asterisco es donde indicamos el número de columnas que va a tener ese contenedor. Si nos pasamos y los contenedores suman más de 12 columnas el ultimo contenedor bajara abajo.
Por lo que podremos utilizar multimplescombinaciones de columnas, por ejemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class="container"> <div class="row"> <div class="col-md-1 well"> 1 Col</div> <div class="col-md-1 well"> 1 Col</div> <div class="col-md-2 well"> 2 Col</div> <div class="col-md-2 well"> 2 Col</div> <div class="col-md-2 well"> 2 Col</div> <div class="col-md-4 well"> 4 Col</div> </div> <div class="row"> <div class="col-md-2 well"> 2 Col</div> <div class="col-md-2 well"> 2 Col</div> <div class="col-md-2 well"> 2 Col</div> <div class="col-md-4 well"> 4 Col</div> <div class="col-md-2 well"> 2 Col</div> </div> <div class="row"> <div class="col-md-6 well"> 6 Col</div> <div class="col-md-6 well"> 6 Col</div> </div> <div class="row"> <div class="col-md-12 well"> 12 Col</div> </div> </div> |
Como veis hemos añadido otro div con una clase que no habíamos visto class=»row», con esto lo que hacemos es bajar a la siguiente fila. No importa que hayamos rellenado utilizado las 12 columnas.
El anterior valor col-md-*esta definiendo un tamaño de columna para un desktop (992px), es lo que significa las letras md, medium device. Dependiendo del dispositivo al que este orientada nuetra aplicación tenemos las siguientes opciones:
| Telefonos (<768px) | Tablets (>= 768px) | Desktops (>=992px) | Grandes desktops (>=1200px) | |
| Tamaño contendor | Auto | 750px | 970px | 1170px |
| Prefijo de clase | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Tamaño de columna | Auto | ~62px | ~81px | ~97px |
Sé que muchos de vosotros ahora mismo estáis pensando en que desarrollas una aplicación web para múltiples dispositivos. Bootstrap lo sabe, y aunque utilices el prefijo md el framework detectara que estas en un dispositivo distinto y ajustara las columnas al tamaño apropiado, pudiendo si se trata de un movil bajar las columnas a la siguiente fila.
De todos modos, este framework también nos permite definir el anchode un contenedor dependiendo del dispositivo. Si tenemos este contenedor:
1 | <div class="col-xs-12 col-sm-6 col-md-8</div> |
Tendremos un contendor de 12 columnas para un teléfono, 6 columnas en una tablet y 8 en un desktop.
Pues esta es la forma que tiene este Bootstrap de crear una pagina web responsive, pero como sabéis ademas nos aporta una gran cantidad de estilos que harán a nuestra aplicación muy actractiva. Existen otros frameworks que utilizan un grid similar como es el caso de 960gspero este framework tan solo nos aporta esta división por columnas.
Después de este articulo y el de primeros pasos ya eres capaz de aplicar bootstrap a toda tu web, tan solo tienes que acudir a la referencia y buscar el valor que necesitas para representar el estilo que le quieras dar al elemento de tu web.
Y como siempre cualquier duda o sugerencia la podéis dejar en los comentarios de este post o utilizar nuestro formulario de contacto.
