Building beautiful websites with Bootstrap:
A case study
by Michael Kennedy
DevelopMentor | @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
What is Bootstrap? Why do you need it?
●
●
●
●
●
●
●
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.
How do you get Bootstrap?
A brief tour of Bootstrap
CSS:
Components:
Grid system
Glyphicons
Badges
Transitions
Typography
Dropdowns
Jumbotron
Modal
Code
Button groups
Page header
Dropdown
Tables
Button dropdowns
Thumbnails
Scrollspy
Forms
Input groups
Alerts
Tab
Buttons
Navs
Progress bars
Tooltip
Images
Navbar
Media object
Popover
Helper classes
Breadcrumbs
List group
Alert
Responsive utilities
Pagination
Panels
Button
Labels
Wells
Collapse
JavaScript:
Carousel
Affix
How did we use Bootstrap at develop.com?
A brief tour of Bootstrap: What we're covering
CSS:
Components:
Grid system
Glyphicons
Badges
Transitions
Typography
Dropdowns
Jumbotron
Modal
Code
Button groups
Page header
Dropdown
Tables
Button dropdowns
Thumbnails
Scrollspy
Forms
Input groups
Alerts
Tab
Buttons
Navs
Progress bars
Tooltip
Images
Navbar
Media object
Popover
List group
Helper classes
Breadcrumbs
Alert
Panels
Responsive utilities
Pagination
Button
Wells
Collapse
Labels
JavaScript:
Carousel
Affix
Labels
<a
class="label label-warning"
href="/course/iOS">iOS</a>
Buttons
<button class="btn btn-danger">Subscribe</button>
<a class="btn btn-success" href="...">Request onsite</a>
Images
<img class="img-circle"
src="/technicalstaff/image/Pierre_Nallet.jpg">
Jumbotrons (AKA hero units)
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>
Blockquotes
<blockquote>
<p>Brock Allen was a brilliant instructor....</p>
<small>Kexin Sun, <cite>Carefusion Corporation</cite></small>
</blockquote>
Forms
<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>
Tables
<table class="table table-striped course-list">
<!-- ... -->
</table>
Wells
<div class="well">
<h2>Full course curriculum at DevelopMentor</h2>
<div>...</div>
</div>
Dialogs
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">&times;</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>
Navigation
<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>
Responsive utilities
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
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