Lab 4: Bootstrap and Responsive Design

Lab 4: Bootstrap and Responsive Design User Interface Lab: GUI Lab Sep. 16th, 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: www.getbootstrap.com • click on download bootstrap • click on download bootstrap again!

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

Basic start <html> <head> <link href=“bootstrap.css”…> <sourcesrc=“jquery.js”…> <sourcesrc=“bootstrap.js”…> </head> <body>…</body> </html>

Basic start <html> <head>…</head> <body> <div class=“container”> </div> </body> </html>

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 <div class=“container”> <div class=“row”> <div class=“col-md-4”>Column 1</div> <div class=“col-md-4”>Column 2</div> <div class=“col-md-4”>Column 3</div> </div> </div>

Bootstrap Components • Forms and input groups • Navs • Glyphicons

Lab 4: Bootstrap and Responsive Design