Primeros pasos con twitter bootstrap

Transcript

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