SlideShare una empresa de Scribd logo
1 de 25
Descargar para leer sin conexión
Steve Noone – 1/18/2013
Bootstrap Responsive Framework
Bootstrap Responsive Framework
Bootstrap Responsive Framework
And many others…
But will likely drop support for IE7 in 2013…
Bootstrap Responsive Framework
Bootstrap Responsive Framework
link
link
Bootstrap Responsive Framework
Bootstrap calls this “Scaffolding:”
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Bootstrap Responsive Framework
Tables Divs Grids Responsive
linklink
link
link
link
link
link
(headlines, body copy, callouts, etc.)
(striping, hover, row colors, context)
(borders, frames, shape masking)
(input add-ons, help text, validation, selects)
(basic types, states, size options & icons)
<table class="table table-striped">
…
</table>
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>
Bootstrap Responsive Framework
Bootstrap Responsive Framework
link
link
Bootstrap Responsive Framework
Bootstrap Responsive Framework
Bootstrap Responsive Framework

Más contenido relacionado

Destacado

Web Banner • Great Eastern Life
Web Banner • Great Eastern LifeWeb Banner • Great Eastern Life
Web Banner • Great Eastern LifeToolbox Design
 
Apresentação Denken (Atualizada) - Baixa Resolução
Apresentação Denken (Atualizada) - Baixa ResoluçãoApresentação Denken (Atualizada) - Baixa Resolução
Apresentação Denken (Atualizada) - Baixa ResoluçãoDenken
 
How Professional Athletes Train Their Minds & What Sales Pros Can Learn
How Professional Athletes Train Their Minds & What Sales Pros Can LearnHow Professional Athletes Train Their Minds & What Sales Pros Can Learn
How Professional Athletes Train Their Minds & What Sales Pros Can LearnJordan Benjamin
 
Building Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cablesBuilding Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cablesHolly Cummins
 
Whiteboard Challenge - Jak rekrutować UX Designera
Whiteboard Challenge - Jak rekrutować UX DesigneraWhiteboard Challenge - Jak rekrutować UX Designera
Whiteboard Challenge - Jak rekrutować UX DesigneraStanislaw Eysmont
 
Big Data in Finance, 2012
Big Data in Finance, 2012Big Data in Finance, 2012
Big Data in Finance, 2012Tomasz Bednarz
 
User Growth for your App - PhoneGap Day Europe 2015
User Growth for your App - PhoneGap Day Europe 2015 User Growth for your App - PhoneGap Day Europe 2015
User Growth for your App - PhoneGap Day Europe 2015 Claudio Cossio
 
History of Digital Media from 1965 1989
History of Digital Media from 1965 1989History of Digital Media from 1965 1989
History of Digital Media from 1965 1989Zeeshan Shah
 
From DevOps to NoOps
From DevOps to NoOpsFrom DevOps to NoOps
From DevOps to NoOpsCapgemini
 
Zombie Apocalypse Survival Guide
Zombie Apocalypse Survival GuideZombie Apocalypse Survival Guide
Zombie Apocalypse Survival GuideScott Gavin
 

Destacado (12)

Web Banner • Great Eastern Life
Web Banner • Great Eastern LifeWeb Banner • Great Eastern Life
Web Banner • Great Eastern Life
 
Get On the Poke Train
Get On the Poke TrainGet On the Poke Train
Get On the Poke Train
 
Apresentação Denken (Atualizada) - Baixa Resolução
Apresentação Denken (Atualizada) - Baixa ResoluçãoApresentação Denken (Atualizada) - Baixa Resolução
Apresentação Denken (Atualizada) - Baixa Resolução
 
How Professional Athletes Train Their Minds & What Sales Pros Can Learn
How Professional Athletes Train Their Minds & What Sales Pros Can LearnHow Professional Athletes Train Their Minds & What Sales Pros Can Learn
How Professional Athletes Train Their Minds & What Sales Pros Can Learn
 
Building Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cablesBuilding Stuff for Fun and Profit - confessions from a life in code and cables
Building Stuff for Fun and Profit - confessions from a life in code and cables
 
What is capitalism
What is capitalismWhat is capitalism
What is capitalism
 
Whiteboard Challenge - Jak rekrutować UX Designera
Whiteboard Challenge - Jak rekrutować UX DesigneraWhiteboard Challenge - Jak rekrutować UX Designera
Whiteboard Challenge - Jak rekrutować UX Designera
 
Big Data in Finance, 2012
Big Data in Finance, 2012Big Data in Finance, 2012
Big Data in Finance, 2012
 
User Growth for your App - PhoneGap Day Europe 2015
User Growth for your App - PhoneGap Day Europe 2015 User Growth for your App - PhoneGap Day Europe 2015
User Growth for your App - PhoneGap Day Europe 2015
 
History of Digital Media from 1965 1989
History of Digital Media from 1965 1989History of Digital Media from 1965 1989
History of Digital Media from 1965 1989
 
From DevOps to NoOps
From DevOps to NoOpsFrom DevOps to NoOps
From DevOps to NoOps
 
Zombie Apocalypse Survival Guide
Zombie Apocalypse Survival GuideZombie Apocalypse Survival Guide
Zombie Apocalypse Survival Guide
 

Último

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 

Último (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 

Bootstrap Responsive Framework