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 ;)
Los principales cambios de Bootstrap 3
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:
- tiny (col-sx-*), para móviles
- small (col-sm-*), para tables
- medium (col-md-*), para ultraportátiles
- large (col-lg-*), para desktops
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.
Algunos consejos para trabajar con Bootstrap 3
- La versión 3 de Bootstrap es mucho más ligera, ya que únicamente pesa 66 kB. La instalación genérica podrás personalizarla con los bootstrap builder más conocidos, ya que están adaptados ya a la nueva versión. Algunos de los más conocidos son: Jetstrap, Bootply, Jaykanakiya o Bootstrap Magic.
- Si quieres que tu diseño no sea responsivo (mediante fluidez y apilamiento de las celdas) puedes servirte de esta hoja de estilos que deberás incluir en tú código HTML.
- Dado que BootStrap está basado en Less, puedes personalizarlo todo simplemente cambiando los valores de las variables, por ejemplo, puedes modificar las dimensiones que le corresponden a cada tipo de col-*, pero recuerda: tendrás que compilarlo de nuevo.
- Este framework te guiará hacia el buen camino en lo que se refiere al diseño. Son muchos los que ya lo usan, por lo que no te pillará desprevenido... Aunque es cierto que tu sitio puede perder personalidad, esta versión trae una nueva hoja de estilos para el tema por separado, lo cual da más facilidades para evitar este problema.
