Bootstrap Introduction

IAT334 Interface Design

WEEK OF 1/9/2013 1

D101 & D104 Labs Spring 2013 - Week 1

Diliara [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 Design Examples

http://blenz.ca

Responsive Design Examples

http://starbucks.ca/

Responsive Design Examples

http://timhortons.ca

Twitter Bootstrap HTML + CSS + JavaScript = Responsive Design Framework

Download Bootstrap

http://getbootstrap.com

WEEK OF 1/9/2013 11

css

(bootstrap.min.css)

img

(glyphicons) js

(bootstrap.min.js)

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

Make an HTML file Bootstrap Template

http://twitter.github.com/bootstrap/getting-started.html

Make an HTML file Responsive Design

http://twitter.github.com/bootstrap/scaffolding.html

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.

How it Works Bootstrap Base CSS

http://twitter.github.com/bootstrap/base-css.html

WEEK OF 1/9/2013 16

How it Works Bootstrap Scaffolding

http://twitter.github.com/bootstrap/scaffolding.html

WEEK OF 1/9/2013 17

Practice

WEEK OF 1/9/2013 18

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

.hero-unit

<h1>

<p>

.btn .btn-primary .btn-large

.span8 .span4

<h2> <h2>

<p> <p>

.btn

Recreate 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.com

WEEK OF 1/9/2013 21