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

Primeros pasos con twitter bootstrap

Avatar for kuadrosx kuadrosx
June 28, 2012
Programming
140
1

Primeros pasos con twitter bootstrap

Avatar for kuadrosx

kuadrosx

June 28, 2012

Other Decks in Programming

See All in Programming
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
110
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
Avatar for Ryusei Ohkura 3l4l5
2
270
T3DD26: From RAGs to Riches
Avatar for Martin Helmich martinhelmich
0
120
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
290
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
250
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
220
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
1k
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
170
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.8k
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
570
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
540
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
9
3.3k

Featured

See All Featured
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
200
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
680
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k

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