Your SlideShare is downloading. ×
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Bootstrap Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bootstrap Introduction

3,527

Published on

Bootstrap tutorial presentation notes prepared for IAT 334 course @SIAT, SFU …

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,527
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
70
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. IAT334 Interface DesignWEEK OF 1/9/2013 1D101 & D104 LabsSpring 2013 - Week 1Diliara [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 DesignExampleshttp://blenz.ca
  • 4. Responsive DesignExampleshttp://starbucks.ca/
  • 5. Responsive DesignExampleshttp://timhortons.ca
  • 6. Twitter BootstrapHTML + CSS + JavaScript = Responsive Design Framework
  • 7. Download Bootstraphttp://getbootstrap.comWEEK OF 1/9/2013 11css(bootstrap.min.css)img(glyphicons)js(bootstrap.min.js)
  • 8. Make an HTML file1. Create HTML 5 document2. Change Title3. Attach 2 CSS files4. Add jQuery Link5. Attach JavaScript file6. Add Responsive Design metatag
  • 9. Make an HTML fileBootstrap Templatehttp://twitter.github.com/bootstrap/getting-started.html
  • 10. Make an HTML fileResponsive Designhttp://twitter.github.com/bootstrap/scaffolding.html
  • 11. 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.
  • 12. How it WorksBootstrap Base CSShttp://twitter.github.com/bootstrap/base-css.htmlWEEK OF 1/9/2013 16
  • 13. How it WorksBootstrap Scaffoldinghttp://twitter.github.com/bootstrap/scaffolding.htmlWEEK OF 1/9/2013 17
  • 14. PracticeWEEK OF 1/9/2013 18
  • 15. Explore!Bootstrap ComponentsFull list of all of the built-in components:http://twitter.github.com/bootstrap/components.htmlWEEK OF 1/9/2013 19
  • 16. .hero-unit<h1><p>.btn .btn-primary .btn-large.span8.span4<h2><h2><p> <p>.btnRecreate 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.comWEEK OF 1/9/2013 21

×