Bootstrap tutorial presentation notes prepared for IAT 334 course @SIAT, SFU Spring 2013 semester

1. IAT334 Interface Design
WEEK OF 1/9/2013 1
D101 & D104 Labs
Spring 2013 - Week 1
Diliara [dilara] Nasirova

2. 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

3. Responsive Design
Examples
http://blenz.ca

4. Responsive Design
Examples
http://starbucks.ca/

5. Responsive Design
Examples
http://timhortons.ca

6. Twitter Bootstrap
HTML + CSS + JavaScript = Responsive Design Framework

7. Download Bootstrap
http://getbootstrap.com
WEEK OF 1/9/2013 11
css
(bootstrap.min.css)
img
(glyphicons)
js
(bootstrap.min.js)

8. 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

9. Make an HTML file
Bootstrap Template
http://twitter.github.com/bootstrap/getting-started.html

10. Make an HTML file
Responsive Design
http://twitter.github.com/bootstrap/scaffolding.html

11. 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.

12. How it Works
Bootstrap Base CSS
http://twitter.github.com/bootstrap/base-css.html
WEEK OF 1/9/2013 16

13. How it Works
Bootstrap Scaffolding
http://twitter.github.com/bootstrap/scaffolding.html
WEEK OF 1/9/2013 17

14. Practice
WEEK OF 1/9/2013 18

15. 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

16. .hero-unit
<h1>
<p>
.btn .btn-primary .btn-large
.span8.span4
<h2><h2>
<p> <p>
.btn
Recreate this design

17. 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