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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/1.jpg)
Building beautiful websites with Bootstrap: A case study
by Michael KennedyDevelopMentor | @mkennedy | michaelckennedy.net
![Page 2: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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 (who is never late)● Bootstrap solves cross browser compat via a reset css● Bootstrap is comprised of
○ CSS (available via LESS)○ JavaScript○ 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 6: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/6.jpg)
JavaScript:
Transitions
Modal
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel
Affix
A brief tour of BootstrapComponents:
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 8: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/8.jpg)
JavaScript:
Transitions
ModalDropdownScrollspy
Tab
Tooltip
Popover
Alert
Button
CollapseCarousel
Affix
A brief tour of Bootstrap: What we're coveringComponents:
GlyphiconsDropdownsButton groups
Button dropdowns
Input groups
NavsNavbarBreadcrumbs
Pagination
Labels
CSS:
Grid system
TypographyCode
TablesFormsButtonsImagesHelper classes
Responsive utilities
Badges
JumbotronPage header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Wells
![Page 9: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/11.jpg)
<img class="img-circle"
src="/technicalstaff/image/Pierre_Nallet.jpg">
Images
![Page 13: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/16.jpg)
<table class="table table-striped course-list">
<!-- ... -->
</table>
Tables
![Page 17: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/18.jpg)
Dialogs
![Page 19: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/24.jpg)
Responsive utilities
![Page 25: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/25.jpg)
Responsive utilitiesUsing 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/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/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>
![Page 27: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/27.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 28: Building beautiful websites with Bootstrap: A case studysddconf.com/.../sdd/library/Building_Beautiful_Websites_With_Bootst… · Building beautiful websites with Bootstrap: A case](https://reader034.fdocuments.net/reader034/viewer/2022042209/5ead045bfcd1bf5b1360bfeb/html5/thumbnails/28.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