Bootstrap Introduction

  • 3,346 views
Uploaded 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

More 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

Views

Total Views
3,346
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
66
Comments
0
Likes
1

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