Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Primeros pasos con twitter bootstrap

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for kuadrosx kuadrosx
June 28, 2012
Programming
1
140

Primeros pasos con twitter bootstrap

Avatar for kuadrosx

kuadrosx

June 28, 2012
Tweet

Other Decks in Programming

See All in Programming
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.5k
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
600
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
200
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
Oxlint JS plugins
Avatar for kazupon kazupon
1
980
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
220
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
1k

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
250
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
160
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k

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