Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
Lab 4: Bootstrap and Responsive Design
User Interface Lab: GUI LabSep. 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”…><source src=“jquery.js”…><source src=“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
![Responsive design - Twitter Bootstrap [FR]](https://img.pdfslide.net/doc/110x75/58ce97ee1a28ab8c3b8b6b85/responsive-design-twitter-bootstrap-fr.jpg)
