Bootstrap 3 ha cambiado bastante respecto a la versión anterior. Ha sido reescrito desde el principio para dar un nuevo enfoque pensando en todos los dispositivos. Vamos a repasar todas las novedades introducidas por Bootstrap 3 y a aprender a usarlas.
Móviles primeros
Al contrario que en Bootstrap 2, donde las utilidades para hacer un diseño responsivo iban en un fichero aparte opcional, en Bootstrap 3 son el eje central del framework. La idea es: primero se diseña para el dispositivo más pequeño y luego vamos adaptando para pantallas mayores.
Este nuevo sistema puede resultar confuso y lioso porque la realidad es que estamos acostumbrados a hacerlo justo al revés. Pero una vez empezamos a utilizar este nuevo sistema nos damos cuenta de lo lógico y sencillo que es diseñar de pequeño a grande.
Grid system
La primera y gran novedad del nuevo Grid de Bootstrap 3 es que desaparecen los diseño estáticos. por tanto lo que antiguamente conocíamos como container-fluid y row-fluid son ahora simplemente container y row. Por tanto desaparecen los viejos container y row.
Contamos con un total de 12 columnas en cada row del mismo tamaño. Independientemente de si tenemos una row dentro de una columna de otra row. Este columna se subdividirá 12 veces.
Media Queries
Bootstrap establece varios tamaños de dispositivos diferentes que los identifica con los siguientes nombres y abreviaciones.
-
Large devices Desktops (lg) - Mayor o igual a 1200px
-
Medium devices Desktops (md) - Mayor o igual a 992px
-
Small devices Tablets (sm) - Mayor o igual a 768px
-
Extra small devices (xs) - Menor que 768px
Así por tanto disponemos de los siguientes media-queries:
/* Extra small devices (phones, up to 480px) */
/* No usa media query es el uso por defecto de bootstrap */
/* Small devices (tablets, 768px y mayores) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px y mayores) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px y mayores) */
@media (min-width: @screen-lg) { ... }
Así pues la metodología es: diseñamos para dispositivos pequeños y luego vamos usando los media query para ver como queremos verlo en dispositivos más grande.
La mejor forma de ver esto es con un ejemplo:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>Lorem ipsum Dolore ea adipisicing est nisi aliquip nostrud occaecat exercitation amet.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>Lorem ipsum Dolore ea adipisicing est nisi aliquip nostrud occaecat exercitation amet.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>Lorem ipsum Dolore ea adipisicing est nisi aliquip nostrud occaecat exercitation amet.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>Lorem ipsum Dolore ea adipisicing est nisi aliquip nostrud occaecat exercitation amet.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>Lorem ipsum Dolore ea adipisicing est nisi aliquip nostrud occaecat exercitation amet.</p>
</div>
</div>
</div>
Aquí vemos que especificamos varias clases a las columnas. Esto significa lo siguiente: con col-xs-12 le decimos que en pantallas pequeñas queremos que cada columna ocupe las 12 disponible, esto significa que ocupará todo el ancho de la pantalla. A continuación con col-sm-6 establecemos que cada columna tenga un ancho de 6 logrando que se vean dos por filas.
Con col-md-4 tendremos un tamaño de 4 columnas en escritorios medianos, es decir, 3 columnas por fila. Por último establecemos col-lg-3 para escritorios largos o lo que es lo mismo 4 columnas por fila.
Este método puede parecer algo lioso al principio, pero con un par de pruebas comprobamos que es más sencillo de lo que parece y que lo que debemos hacer es establecer el estilo inicial para móviles e ir cambiando lo que queramos en escritorios mayores. Hay que tener en cuenta que lo que aplicamos a un tamaño se lo aplicamos automáticamente a sus tamaños mayores. Algo bueno ya que la tónica a seguir es decir a partir de cierto tamaño que se coloque de tal manera (se muestre el menú, contenido oculto, etc...). Aunque siempre podemos tener el control total de cada vista a través de los media-queries.
Reordenar columnas
Es posible cambiar el orden en el que se muestran las columnas según el tamaño. Así por ejemplo si tenemos en escritorios grande un texto a la derecha con una imagen a la izquierda podríamos tener algo como esto.
<div class="row">
<div class="col-md-6">
<img src="..." alt="...">
</div>
<div class="col-md-6">
<p>Aquí el texto...</p>
</div>
</div>
Con esto lo que estamos diciendo es que a partir de los escritorios medianos (md) se muestre en dos columnas (12/6=2). Con una imagen en la columna de la izquierda y un texto en la derecha de dicha imagen. Hasta aquí bien, ahora, que sucede con escritorios menores a md. Pues que se apilan las columnas una debajo de otra en este caso la imagen queda arriba y el texto debajo de la imagen.
Que sucede si queremos que se apilen al revés, es decir, que primero quede el texto y luego la imagen. Sabemos que en HTML sin el uso de CSS los elementos se apilan uno debajo del otro.
Aquí es donde entra la ventaja de la filosofía móviles primeros propuesta por Bootstrap 3. Lo que debemos hacer es estructurar el contenido tal y como queremos que se vea en los dispositivos más pequeños.
<div class="row">
<div class="col-md-6">
<p>Aquí el texto...</p>
</div>
<div class="col-md-6">
<img src="..." alt="...">
</div>
</div>
Ahora se verá correctamente en los dispositivos menores a md mostrando primero el texto y debajo la imagen. Ahora bien, a partir de md se mostrará en dos columnas, pero quedará el texto a la izquierda y la imagen a la derecha. Es hora de ver los nuevos pull y push.
Las clases .col-md-push- u .col-md-pull- lo que hacen es "empujar" y "tirar" respectivamente. Si nosotros hacemos por ejemplo:
<div class="col-md-push-6">
...
</div>
Lo que estamos haciendo es empujar esa div 6 columnas, es decir la ponemos 6 posiciones más allá del lugar que le corresponde, hacia la derecha. Por el contrario pull hace el efecto contrario, tira del contenido hacia la izquieda.
Así pues nuestro ejemplo del texto y la imagen quedaría de la siguiente manera.
<div class="row">
<div class="col-md-6 col-md-push-6">
<p>Aquí el texto...</p>
</div>
<div class="col-md-6 col-md-pull-6">
<img src="..." alt="...">
</div>
</div>
Simplemente le decimos que a partir de un escritorio md empuje el texto 6 columnas a la derecha y tire de la div que contiene de la imagen 6 columnas a la izquierda. Por lo que conseguiremos nuestro objetivo de que en dispositivos menores salga el texto antes y la imagen después y a partir de escritorios medianos salga la imagen a la izquierda y el texto a la derecha.
Ni que decir tiene que este método acepta todo tipo de combinaciones para los diferentes tamaños de Bootstrap. Es cuestión de probar.
Imágenes responsivas
Otra de las novedades importantes de Bootstrap 3 son las imágenes responsiva. Se trata de imágenes que se adaptan al tamaño del contenedor ocupando el 100% del mismo. Su uso no puede ser más sencillo que:
<img src="#" class="img-responsive" alt="Image">
Como vemos sólo debemos añadir la clase img-responsive y la imagen se adaptará al contendor. Siempre podemos añadir nosotros un max-width para que no sobrepase un tamaño deseado.
Soporte de navegadores
La lista de navegadores soportados es la siguiente:
-
Chrome (Mac, Windows, iOS, y Android)
-
Safari (Mac e iOS solamente)
-
Firefox (Mac, Windows)
-
Internet Explorer
-
Opera (Mac, Windows)
Internet explorer estará soportado hasta la versión 8, pero para que funcione correctamente en esta necesitaremos incluir respond.js.
Resto de novedades
El resto de novedades destacables como el cambio de estilo hacia uno más plano, el paso de Glyphicons como parte externa y los nuevos paneles ya los vimos en Genbeta Dev cuando analizamos la RC1, en ese aspecto no ha cambiado esta versión final.
En definitiva, muy recomendable pasarse a esta nueva versión. Sobre todo si se quieren diseñar sitios responsivos porque Bootstrap 3 y su filosofía "móviles primero" está pensado para ello.
Sitio oficial | http://getbootstrap.com/
