Embed Size (px)
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
![JUnit-Testing GUI Components [Autosaved]shsaad/seng426/resources/Lab Slides... · 2011-06-15 · JUnit-Testing GUI Components . Agenda Test GUI Components Simple GUI Application Test](https://img.pdfslide.net/doc/110x75/5e237780175e3d268e70f660/junit-testing-gui-components-autosaved-shsaadseng426resourceslab-slides.jpg)
