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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Bootstrap Introduction


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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 DesignExamples
  • 4. Responsive DesignExamples
  • 5. Responsive DesignExamples
  • 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 Template
  • 10. Make an HTML fileResponsive Design
  • 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 CSS OF 1/9/2013 16
  • 13. How it WorksBootstrap Scaffolding OF 1/9/2013 17
  • 14. PracticeWEEK OF 1/9/2013 18
  • 15. Explore!Bootstrap ComponentsFull list of all of the built-in components: 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:•• W3C Validator:•• Free Graphics:•• Firebug:• http://getfirebug.comWEEK OF 1/9/2013 21