A finales de agosto del 2013 se publicó la nueva versión de Bootstrap, uno de los frameworks front-end más populares en la actualidad para el desarrollo de páginas y aplicaciones web multidispositivo. La versión 3 de este framework gratuito creado por Twitter está disponible para su descarga en los repositorios de github. Si estás intentando actualizar desde una versión anterior, te darás cuenta de que no se trata de una simple sustitución de archivos, y todo tendrá un aspecto un tanto caótico. ¡Que no cunda el pánico! Nosotros te ayudamos ;)
El cambio más significativo lo encontramos en el sistema de grids, que ahora está enfocado al "mobile first", una de las prácticas de diseño web más de moda. Esto le da la vuelta a la tortilla: si bien antes se realizaba un diseño para Desktop, que se adaptaba a dispositivos móviles de forma automática, ahora lo que se busca es un buen diseño para dispositivos móviles que se adapte a las pantallas más grandes (si se ve bien en una pantalla pequeña, mucho mejor en una grande), algo que se puso también en práctica en el diseño de Windows 8.
Este nuevo grid, ahora enteramente fluido (es decir relativo, o lo que es lo mismo, porcentual), sigue manteniendo las 12 columnas por fila, siendo estas ahora 100% model box (los span no eran model box). Podremos diseñar celdas que ocupen un determinado número de columnas, según el ancho de la pantalla del dispositivo, dentro de los comprendidos por Bootstrap 3:
Estas pueden utilizarse por separado o de forma combinada dentro de un mismo diseño, es decir, una celda puede utilizar a la vez estas tres clases. De esta forma, dependiendo del dispositivo unas celdas ocuparán más o menos columnas, según nuestra elección. Así el diseño puede volverse muy atractivo para los usuarios.
Antes cuando las celdas no entraban en la pantalla se desplazaban al siguiente renglón formando una pila. En esta nueva versión, esto ya no ocurre gracias a las col-xs !. Con esta regla, para las pantallas superiores o iguales (en ancho) se mantiene fluido y para las inferiores se produce el apilamiento por volverse flotantes. Por ejemplo si has definido un col-sm y se está utilizando una pantalla tipo col-sx, las col-sm o superiores se apilarán. Si utilizas col-sx, siempre será fluido sin que se apilen, ya que es el ancho de pantalla mínimo.