Download - Bootstrap Introduction
IAT334 Interface Design
WEEK OF 1/9/2013 1
D101 & D104 Labs Spring 2013 - Week 1
Diliara [dilara] Nasirova
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
Responsive Design Examples
http://blenz.ca
Responsive Design Examples
http://starbucks.ca/
Responsive Design Examples
http://timhortons.ca
Twitter Bootstrap HTML + CSS + JavaScript = Responsive Design Framework
Download Bootstrap
http://getbootstrap.com
WEEK OF 1/9/2013 11
css
(bootstrap.min.css)
img
(glyphicons) js
(bootstrap.min.js)
Make an HTML file 1. Create HTML 5 document
2. Change Title
3. Attach 2 CSS files
4. Add jQuery Link
5. Attach JavaScript file
6. Add Responsive Design metatag
Make an HTML file Bootstrap Template
http://twitter.github.com/bootstrap/getting-started.html
Make an HTML file Responsive Design
http://twitter.github.com/bootstrap/scaffolding.html
How it Works 12-column grid
WEEK OF 1/9/2013 15
.span12
.span4 .span4 .span4
.span3 .span9
.container-fluid
.span1 .span11
• Relies on you making divs with
certain classes.
• Bootstrap has many built-in
components whose styles can
be applied as well.
How it Works Bootstrap Base CSS
http://twitter.github.com/bootstrap/base-css.html
WEEK OF 1/9/2013 16
How it Works Bootstrap Scaffolding
http://twitter.github.com/bootstrap/scaffolding.html
WEEK OF 1/9/2013 17
Practice
WEEK OF 1/9/2013 18
Explore! Bootstrap Components
Full list of all of the built-in components:
http://twitter.github.com/bootstrap/components.html
WEEK OF 1/9/2013 19
.hero-unit
<h1>
<p>
.btn .btn-primary .btn-large
.span8 .span4
<h2> <h2>
<p> <p>
.btn
Recreate this design
Useful Resources
• Examples of websites built with bootstrap: • www.builtwithbootstrap.com
• W3C Validator: • http://validator.w3.org
• Free Graphics: • http://subtlepatterns.com
• Firebug: • http://getfirebug.com
WEEK OF 1/9/2013 21