Twitter Bootstrap 3

Twitter Bootstrap 3: Mobile-first

Twitter Boostrap es un conjunto de herramientas (Framework) que contiene código HTML, CSS y JavaScript para el diseño de páginas web responsivas y estándares, aportando un diseño preliminar de formularios, tablas, botones, tipografía, ventanas modales, carrusel de imágenes y otros componentes de interfaz de usuario.

La versión 3 de Twitter Boostrap fue escrita desde cero y las principales características tienen que ver con el abandono de soporte de navegadores antiguos y un diseño pensado desde el principio para dispositivos móviles (bajo la premisa: “Mobile-first”).

Grid

Ahora todo el código CSS esta en un solo archivo “bootstrap.css” (fusionando el CSS del responsive design con el resto de los estilos). En esta versión el uso de la clase .span* desaparece, a partir de ahora se utilizará .col-* para establecer el tamaño en los smartphones, .col-sm-* para tablets y .col-lg-* para portátiles y computadoras de escritorio.

<!-- Fila -->
<div class="row">
   <!-- 12 para smartphones. 8 para tablets, portátiles y pc's -->
   <div class="col-12 col-sm-8 col-lg-8">Contenido</div>
   <!-- 6 para smartphones. 4 para tablets, portátiles y pc's -->
   <div class="col-6 col-sm-4 col-lg-4">Contenido</div>
</div>

Diseño

Siguiendo las tendencias del último año (iOS 7 y Windows 8), ahora el diseño de Twitter Boostrap es totalmente plano, los botones, las alertas y el resto de los elementos tienen un diseño sencillo, sin gradientes, ni sombras.

Twitter Bootstrap 3

Soporte de navegadores

Twitter Boostrap 3 ofrece soporte a los siguientes navegadores:

  • Chrome (Linux, Mac, Windows, iOS, and Android)
  • Safari (Mac e iOS)
  • Firefox (Linux, Mac, Windows)
  • Internet Explorer
  • Opera (Mac, Windows)

Abandonando de forma oficial a Internet Explorer 7 y perdiendo algunas propiedades de CSS3 en Internet Explorer 8 y 9 (como las esquinas redondeadas).

Además para el uso de los media query será necesario el uso de respond.js.

Enlace: Twitter Boostrap 3

Share Button