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?

http://www.develop.com/webcasts/watch/524ca37dd588bf0e4c201af5

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

How did we use Bootstrap at develop.com?

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">&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>

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