Your SlideShare is downloading. ×
Primeros pasos con twitter bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Primeros pasos con twitter bootstrap

3,687
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,687
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
60
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Primeros pasoscon twitterbootstrap 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 yamigos● 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 designLayout Fluido ● Layout: .container-fluid y .row-fluid
  • 8. Responsive designEsconder o mostrar en: desktop: ancho superior a smartphone: ancho menor tablet: ancho menor a 767px 768px a 480px
  • 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: coffeescriptJavascript mvc frameworks:● http://backbonejs.org/● http://emberjs.com/
  • 13. Grandes cosas están porllegar http://yeoman.io/
  • 14. ¡Gracias y Happy Hacking! Jorge H. Cuadrado @kuadrosx http://preguntas.dev-co.org @nounproject

×