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

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

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

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

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

Getting jQuery Bootstrap requires jQuery go to: jquery-with-a-cdn – or go to – navigate to downloads – scroll down to “Using jquery with a cdn” Choose a CDN to use

Basic start …

Basic start …

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

Basic 3 column layout Column 1 Column 2 Column 3

Bootstrap Components Forms and input groups Navs Glyphicons