1. Bootstrap/WebFlow Web development of the future
CIS 388
Bootstrap/WebFlow Web development of the future

2. Bootstrap! What is Bootstrap?
Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. It also gives you support for JavaScript plugins.
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto andJacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.
Bootstrap is completely free to download and use!

3. How to use Bootstrap? Download Bootstrap from getbootstrap.com
Download bootstrap and upload it to a folder on your site and include it in every page (header/include) of your site
<link rel="stylesheet" href=“local bootstrap link.css">
Include Bootstrap from a CDN
Include the bootstrap libraries from another popular location/site on the web through a header/include on your page(s).
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="

4. Bootstrap CDN and Jquery
One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
jQuery
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the CSS part of Bootstrap, you don't need jQuery. *

5. Bootstrap Grid
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
span 1
 span 4
span 4
span 8
span 6
span 12

6. Bootstrap Grid (continued)
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
Ex. <div class="col-xs-1 col-md-9 col-lg-6"></div>
*Be sure to add a “clear:both” style to start a new row!

7. Other Bootstrap Classes
Tables
Images
table-striped
img-rounded
table-bordered
img-circle
table-hover
img-thumbnail
table-condensed
Cells
active
success
info
warning
danger

8. Other Bootstrap Goodies
Slideshow/Carousel
<div id="myCarousel" class="carousel slide" data-ride="carousel">   <!-- Indicators -->   <ol class="carousel-indicators">     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>     <li data-target="#myCarousel" data-slide-to="1"></li>     <li data-target="#myCarousel" data-slide-to="2"></li>   </ol>   <!-- Wrapper for slides -->   <div class="carousel-inner">     <div class="item active">       <img src="la.jpg" alt="Los Angeles">     </div>     <div class="item">       <img src="chicago.jpg" alt="Chicago">     </div>     <div class="item">       <img src="ny.jpg" alt="New York">     </div>   </div>   <!-- Left and right controls -->   <a class="left carousel-control" href="#myCarousel" data-slide="prev">     <span class="glyphicon glyphicon-chevron-left"></span>     <span class="sr-only">Previous</span>   </a>   <a class="right carousel-control" href="#myCarousel" data-slide="next">     <span class="glyphicon glyphicon-chevron-right"></span>     <span class="sr-only">Next</span>   </a> </div>

9. Other Bootstrap Goodies
Drop-Downs
<div class="dropdown">   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example   <span class="caret"></span></button>   <ul class="dropdown-menu">     <li><a href="#">HTML</a></li>     <li><a href="#">CSS</a></li>     <li><a href="#">JavaScript</a></li>   </ul> </div>
More Bootstrap Resources and Info

10. Webflow What is webflow?
Webflow is a design tool, CMS, and hosting platform. It gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.
Try it for free:

11. Webflow interface

12. Webflow Tools and Resources
YouTube:
Facebook:
Getting Started: