Primeros pasos con twitter bootstrap

Primeros pasos con twitter bootstrap Jorge H. Cuadrado

¿Que es twitter bootstrap?

Obtener una plantilla inicial http://initializr.com/ • Seleccionár Bootstrap • Css
en lugar de less • Seleccionar plugins.js • Clic en "Download it!"

Entendiendo index.html y amigos • index.html: <head> y scripts •
modernirz+responds • plugins.js • chrome frame • bootstrap ◦ javacripts ◦ css ◦ imgs

Cuadricula (12) y layout

Cuadricula (12) y Layout .container .row .span4 .span8

Responsive design Layout Fluido • Layout: .container-fluid y .row-fluid

Responsive design Esconder o mostrar en: smartphone: ancho menor a
480px tablet: ancho menor a 767px desktop: ancho superior a 768px

Estilos básicos • Tipografias • Partes de Código • Tablas
• Formularios • Botones • Iconos

Componentes • Grupo de botones • Button dropdowns • Miniaturas
o Thumbnails • Navegación: Paginación, Tabs, Nav List

Javascript • Modal • Tooltips • Popover • Carrusel

¿Qué sigue? Preprocesadores: • css: Less o Sass • html:
Haml o Slim • javascript: coffeescript Javascript mvc frameworks: • http://backbonejs.org/ • http://emberjs.com/

Grandes cosas están por llegar http://yeoman.io/

¡Gracias y Happy Hacking! Jorge H. Cuadrado @kuadrosx http://preguntas.dev-co.org @nounproject

Primeros pasos con twitter bootstrap

Primeros pasos con twitter bootstrap

kuadrosx

Other Decks in Programming

Featured

Transcript