Building beautiful websites with Bootstrap: A case...
Transcript of Building beautiful websites with Bootstrap: A case...
Building beautiful websites with Bootstrap: A case study
by Michael KennedyDevelopMentor | @mkennedy | michaelckennedy.net
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
● 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?
How do you get Bootstrap?
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
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
<a
class="label label-warning"
href="/course/iOS">iOS</a>
Labels
<button class="btn btn-danger">Subscribe</button>
<a class="btn btn-success" href="...">Request onsite</a>
Buttons
<img class="img-circle"
src="/technicalstaff/image/Pierre_Nallet.jpg">
Images
Jumbotrons (AKA hero units)
<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)
<blockquote>
<p>Brock Allen was a brilliant instructor....</p>
<small>Kexin Sun, <cite>Carefusion Corporation</cite></small>
</blockquote>
Blockquotes
<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
<table class="table table-striped course-list">
<!-- ... -->
</table>
Tables
<div class="well">
<h2>Full course curriculum at DevelopMentor</h2>
<div>...</div>
</div>
Wells
Dialogs
<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
<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
<header>
<nav class="navbar navbar-inverse navbar-default">
...
</nav>
</header>
Navigation
<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
<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
Responsive utilities
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
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>
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.
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