Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Primeros pasos con twitter bootstrap
Search
kuadrosx
June 28, 2012
Programming
1
140
Primeros pasos con twitter bootstrap
kuadrosx
June 28, 2012
Tweet
Share
Other Decks in Programming
See All in Programming
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.9k
AI巻き込み型コードレビューのススメ
nealle
2
430
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
fruitriin
0
140
CSC307 Lecture 05
javiergs
PRO
0
500
AI時代の認知負荷との向き合い方
optfit
0
160
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
200
CSC307 Lecture 07
javiergs
PRO
1
550
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
5
760
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.5k
Featured
See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Unsuck your backbone
ammeep
671
58k
BBQ
matthewcrist
89
10k
Believing is Seeing
oripsolob
1
56
WENDY [Excerpt]
tessaabrams
9
36k
エンジニアに許された特別な時間の終わり
watany
106
230k
Amusing Abliteration
ianozsvald
0
100
Rails Girls Zürich Keynote
gr2m
96
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
120
Transcript
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