Twitter Bootstrap

De WikiEducator
Saltar a: navegación, buscar


Requerimientos previos

  • node.js
  • npm (Viene con node desde la v0.6.3)
  • git (prerequisito for bower)
  • Bower, gestor de paquetes para web
  • Grunt, gestor de tareas de javascript]
  • Conocimiento básico de less

npm install -g bower grunt-cli npm install -g grunt-cli a very light understanding of LESSs

¿Qué es Twitter Bootstrap?

  • Es el framework de Twitter que permite crear interfaces web con CSS y Javascript
  • The most popular front-end framework for developing responsive, mobile first projects on the web.

Versiones de Bootstrap

  • La versión 3 salió el 19 de Agosto de 2013, ver blog.
  • Ojo con documentación, consultas en stackoverflow, etc. hay mucha más información de Bootstrap 2. ¡Debemos mirar con cuidado!

Descargas de Bootstrap

  • Compilada y comprimida. Sin documentos ni fuentes originales.
  • Sin compilar ni comprimir. Los fuentes de CSS están en Less.
  • Sin compilar ni comprimir. Los fuentes de CSS están en Sass.

Utilidad de Bootstrap

  • Tenemos dos opciones para utilizar Bootstrap:
  • Utilizar exclusivamente su sistema de rejilla (grid) para colocar elementos y responsividad.
  • Utilizar su diseño: botones, labels, etc así como su librería de javascript (basada en jQuery).

Diseño con Bootstrap

  • Modificaremos a partir de los ficheros less existentes.
  • Crearemos themes.
  • También podremos optar por descargar themes existentes (muchos de pago).



Bower

  • Es un gestor de paquetes de Front End.
  • Depende de nodejs y de npm (node package manager).

sudo apt-get install npm