Primeros pasos con twitter bootstrap

4,040 views

Published on

  • Be the first to comment

Primeros pasos con twitter bootstrap

  1. 1. Primeros pasoscon twitterbootstrap Jorge H. Cuadrado
  2. 2. ¿Que es twitter bootstrap?
  3. 3. Obtener una plantilla inicial http://initializr.com/● Seleccionár Bootstrap● Css en lugar de less● Seleccionar plugins.js● Clic en "Download it!"
  4. 4. Entendiendo index.html yamigos● index.html: <head> y scripts● modernirz+responds● plugins.js● chrome frame● bootstrap ○ javacripts ○ css ○ imgs
  5. 5. Cuadricula (12) y layout
  6. 6. Cuadricula (12) y Layout.container .row .span4 .span8
  7. 7. Responsive designLayout Fluido ● Layout: .container-fluid y .row-fluid
  8. 8. Responsive designEsconder o mostrar en: desktop: ancho superior a smartphone: ancho menor tablet: ancho menor a 767px 768px a 480px
  9. 9. Estilos básicos● Tipografias● Partes de Código● Tablas● Formularios● Botones● Iconos
  10. 10. Componentes● Grupo de botones● Button dropdowns● Miniaturas o Thumbnails● Navegación: Paginación, Tabs, Nav List
  11. 11. Javascript● Modal● Tooltips● Popover● Carrusel
  12. 12. ¿Qué sigue?Preprocesadores:● css: Less o Sass● html: Haml o Slim● javascript: coffeescriptJavascript mvc frameworks:● http://backbonejs.org/● http://emberjs.com/
  13. 13. Grandes cosas están porllegar http://yeoman.io/
  14. 14. ¡Gracias y Happy Hacking! Jorge H. Cuadrado @kuadrosx http://preguntas.dev-co.org @nounproject

×