Responsive Design• What is it and why should we care about it?• CSS3 media queries: use different CSS styles based on the screen size• Fluid grid: %-based or EM-based sizes allows flexible design• Flexible images: images resize as part of the design• Together:• one codebase across all devices• UI adapts to the screen at hand
Download Bootstraphttp://getbootstrap.comWEEK OF 1/9/2013 11css(bootstrap.min.css)img(glyphicons)js(bootstrap.min.js)
Make an HTML fileBootstrap Templatehttp://twitter.github.com/bootstrap/getting-started.html
Make an HTML fileResponsive Designhttp://twitter.github.com/bootstrap/scaffolding.html
How it Works12-column gridWEEK OF 1/9/2013 15.span12.span4 .span4 .span4.span3 .span9.container-fluid.span1 .span11• Relies on you making divs withcertain classes.• Bootstrap has many built-incomponents whose styles canbe applied as well.
How it WorksBootstrap Base CSShttp://twitter.github.com/bootstrap/base-css.htmlWEEK OF 1/9/2013 16
How it WorksBootstrap Scaffoldinghttp://twitter.github.com/bootstrap/scaffolding.htmlWEEK OF 1/9/2013 17