1. Lab 4: Bootstrap and Responsive Design User Interface Lab: GUI Lab Sep. 16 th, 2014

2. Projects Project 1a grades (mostly) back Project 2 due 09/30! Better Demo of Project 2

3. Lab 3 goals Overview of Bootstrap Setting Up Bootstrap Some basic Bootstrap examples

4. What is Bootstrap A collection of pre-compiled CSS and JS libraries that implement responsive web design Takes a “mobile-first” perspective to design Attempts better normalize rendering across browsers

5. Getting Started Make a new blank project/new HTML file. go to: www.getbootstrap.com click on download bootstrap click on download bootstrap again!

6. Getting jQuery Bootstrap requires jQuery go to: http://jquery.com/download/#using- jquery-with-a-cdn – or go to www.jquery.com – navigate to downloads – scroll down to “Using jquery with a cdn” Choose a CDN to use

7. Basic start …

8. Basic start …

9. Bootstrap Columns Bootstrap is based on a 12 column Also supports 4 common screen sizes – xs (< 768px) – sm (≥ 786px) – md (≥ 992px) – lg (≥ 1200px)

10. Basic 3 column layout Column 1 Column 2 Column 3

11. Bootstrap Components Forms and input groups Navs Glyphicons