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

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!

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

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. *127.0.0.1

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

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!

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

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>

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 https://www.w3schools.com/bootstrap/bootstrap_ver.asp

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: https://webflow.com/pricing

Webflow interface

Webflow Tools and Resources YouTube: https://www.youtube.com/channel/UCELSb-IYi_d5rYFOxWeOz5g Facebook: https://www.facebook.com/webflow/ Getting Started: https://university.webflow.com/lesson/intro-to-designer-101