Bootstrap Introduction
Upcoming SlideShare
Loading in...5
×
 

Bootstrap Introduction

on

  • 3,368 views

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

Statistics

Views

Total Views
3,368
Slideshare-icon Views on SlideShare
1,534
Embed Views
1,834

Actions

Likes
0
Downloads
49
Comments
0

6 Embeds 1,834

http://www.diliaranasirova.com 1786
http://www.ipv6.diliaranasirova.com 34
http://www.linkedin.com 11
http://www.365dailyjournal.com 1
http://prlog.ru 1
https://www.google.com.tw 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Bootstrap Introduction Bootstrap Introduction Presentation Transcript

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