Building beautiful websites with Bootstrap: A case...
Transcript of Building beautiful websites with Bootstrap: A case...
![Page 1: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/1.jpg)
Building beautiful websites with Bootstrap: A case study
by Michael Kennedy DevelopMentor | @mkennedy | michaelckennedy.net
![Page 2: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/2.jpg)
Objectives
● Learn what Bootstrap has to offer web developers
● Install and use Bootstrap
● Learn the major components / features of Bootstrap
● See a real-world application of these features to a website redesign
![Page 3: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/3.jpg)
● Bootstrap is a web front-end framework ● With bootstrap you start from a beautiful site and add to it ● Bootstrap is the designer we never had (and who is never late) ● Bootstrap solves cross browser compat via a reset css ● Bootstrap is comprised of
o CSS (available via LESS) o JavaScript o Fonts (which stand in for images)
● Open-source on Github ● Created by two guys who work at Twitter.
What is Bootstrap? Why do you need it?
![Page 4: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/4.jpg)
Invest a little and (really) learn CSS
http://www.amazon.com/CSS-The-Missing-Manual-Manuals/dp/0596802447
![Page 5: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/5.jpg)
How do you get Bootstrap?
![Page 6: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/6.jpg)
JavaScript: Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix
A brief tour of Bootstrap Components: Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels
CSS: Grid system Typography Code Tables Forms Buttons Images Helper classes Responsive utilities
Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells
![Page 7: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/7.jpg)
How did we use Bootstrap at develop.com?
![Page 8: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/8.jpg)
JavaScript: Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix
A brief tour of Bootstrap: What we're covering Components: Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels
CSS: Grid system Typography Code Tables Forms Buttons Images Helper classes Responsive utilities
Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells
![Page 9: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/9.jpg)
<a class="label label-‐warning" href="/course/iOS">iOS</a>
Labels
![Page 10: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/10.jpg)
<button class="btn btn-‐danger">Subscribe</button>
<a class="btn btn-‐success" href="...">Request onsite</a>
Buttons
![Page 11: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/11.jpg)
<img class="img-‐circle" src="/technicalstaff/image/Pierre_Nallet.jpg">
Images
![Page 12: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/12.jpg)
Jumbotrons (AKA hero units)
![Page 13: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/13.jpg)
<section class="jumbotron"> <div class="container"> <h2 class="mission-‐statement"> We develop people<br> who develop software </h2>
<div class="visible-‐sm visible-‐xs"></div> <img class="jumbotron-‐image" src="/images/macbook-‐pro-‐vs.jpg"> </div>
</section>
Jumbotrons (AKA hero units)
![Page 14: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/14.jpg)
<blockquote> <p>Brock Allen was a brilliant instructor....</p> <small>Kexin Sun, <cite>Carefusion Corporation</cite></small>
</blockquote>
Blockquotes
![Page 15: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/15.jpg)
<form action="/store/register/..." method="post"> <strong>Credit Card Details</strong> <div class="form-‐group">
<div> <label class="form-‐label" for="CreditCardNumber">Card Number</label> <input class="form-‐control" data-‐val="true" type="text"></div> </div>
</div> </form>
Forms
![Page 16: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/16.jpg)
<table class="table table-‐striped course-‐list"> <!-‐-‐ ... -‐-‐> </table>
Tables
![Page 17: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/17.jpg)
<div class="well">
<h2>Full course curriculum at DevelopMentor</h2> <div>...</div>
</div>
Wells
![Page 18: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/18.jpg)
Dialogs
![Page 19: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/19.jpg)
<div id="upcoming-‐classes-‐dialog" class="modal fade" tabindex="-‐1" role="dialog"> <div class="modal-‐dialog"> <div class="modal-‐content"> <div class="modal-‐header">
<button type="button" class="close" data-‐dismiss="modal">×</button> <h4 class="modal-‐title">...</h4>
</div> <div class="modal-‐body"> ... </div> <div class="modal-‐footer">
<button type="button" class="btn btn-‐success" data-‐dismiss="modal">Close</button> </div> </div><!-‐-‐ /.modal-‐content -‐-‐> </div><!-‐-‐ /.modal-‐dialog → </div>
Dialogs
![Page 20: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/20.jpg)
<a class='btn ...' data-‐toggle='modal' href='#upcoming-‐classes-‐dialog'>Upcoming classes</a> <div id="upcoming-‐classes-‐dialog" class="modal fade" tabindex="-‐1" role="dialog"> ... </div>
Dialogs
![Page 21: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/21.jpg)
<header> <nav class="navbar navbar-‐inverse navbar-‐default"> ... </nav> </header>
Navigation
![Page 22: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/22.jpg)
<nav class="main navbar navbar-‐inverse navbar-‐default"> <div> <a class="navbar-‐brand" href="/">DEVELOPMENTOR ...</a> </div> <ul class="nav navbar-‐nav"> <li><a href="...">Classroom</a></li> <li><a href="...">Online</a></li> <li><a href="...">Courses</a></li> ... <li> class="dropdown"> ... </li> </ul> </nav>
Navigation
![Page 23: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/23.jpg)
<nav class="main navbar navbar-‐inverse navbar-‐default"> ... <ul class="nav navbar-‐nav"> ... <li class="dropdown"> <a class="dropdown-‐toggle" data-‐toggle="dropdown" href="#"> More <span class="glyphicon glyphicon-‐circle-‐arrow-‐down"></span> </a>
<ul class="dropdown-‐menu" role="menu"> <li><a href="...">Training curriculum</a></li> <li><a href="...">Public course schedule</a></li> ... </ul>
</li> </ul> </nav>
Navigation
![Page 24: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/24.jpg)
Responsive utilities
![Page 25: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/25.jpg)
Responsive utilities Using the responsive classes allow us to keep the key navigation on the screen on smaller devices without creating an overly crowded navigation: wide medium small phone
![Page 26: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/26.jpg)
Responsive utilities Using the responsive classes allow us to keep the key navigation on the screen on smaller devices without creating an overly crowded navigation: <li class="hidden-‐sm"><a href="...">Classroom</a></li> <li class="hidden-‐sm"><a href="...">Online</a></li> <li><a href="...">Courses</a></li> <li class="hidden-‐sm hidden-‐md"><a href="...">Search</a></li> <img class="img img-‐responsive" .../>
![Page 27: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/27.jpg)
Responsive Grids
![Page 28: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/28.jpg)
Font Icons
![Page 29: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/29.jpg)
Themes
https://bootswatch.com/ http://startbootstrap.com/ https://wrapbootstrap.com/
![Page 30: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/30.jpg)
Bower Bower is a great way to install and manage bootstrap • Install node.js • npm install -g bower • bower install bootstrap (may require git)
![Page 31: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/31.jpg)
Product / App Images Placeit.net is a sweet way to feature your product
![Page 32: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/32.jpg)
Regrets I wish I would have: 1. Used LESS for our CSS and built on Bootstrap's LESS foundation. 2. Learned and used the responsive utilities earlier.
![Page 33: Building beautiful websites with Bootstrap: A case studysddconf.com/brands/sdd/library/Building_beautiful...Objectives Learn what Bootstrap has to offer web developers Install and](https://reader030.fdocuments.in/reader030/viewer/2022040917/5e91ee8d2414fa150445cc38/html5/thumbnails/33.jpg)
Summary: Bootstrap, a case study
● Bootstrap is that designer you always which you had (or were)
● Installing Bootstrap is easy (getbootstrap.com or NuGet)
● Bootstrap offers a wide range of features from CSS layouts, to styles, to
behaviors driven via data-* attributes.
● We saw a real-world application of these features to a website redesign