This hands-on session will introduce you to Bootstrap, a powerful HTML/CSS framework for developing responsive web sites. Learn how to leverage the various capabilities of this framework to quickly generate HTML prototypes.
Attendees will work through creating a basic consumer web site. We will look at the new layout framework introduced in Bootstrap 3, a variety of web components, and some basic CSS styling.
Don’t worry if writing HTML is outside your comfort zone, this session will take you from the basics to creating impressive web prototypes in no time.
27. BUTTONSBUTTONS
SIZESSIZES
Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
BLOCK LEVELBLOCK LEVEL
Create block level buttons—those that span the full width of
a parent— by adding .btn-block.
DISABLED STATEDISABLED STATE
Add the disabled attribute to <button> buttons.
Add the .disabled class to <a> buttons.
35. THUMBNAIL SNIPPETTHUMBNAIL SNIPPET
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="imgs/192x200.gif" alt="...">
<div class="caption">
<h3>Product Name</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id do
lor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary" role="button">Add t
o Cart</a>
</p>
</div>
</div>
</div>
...
44. FORM-GROUPSFORM-GROUPS
<div class="form-group">
<label for="ccname">Name (as it appears on your card)</label>
<input type="text" class="form-control" id="ccname">
</div>
<div class="form-group">
<label for="ccnumber">Card number (no dashes or spaces)</label>
<input type="text" class="form-control" id="ccnumber">
</div>
45. INLINE FORM ELEMENTSINLINE FORM ELEMENTS
Add .form-inline to your form (which doesn't have to
be a <form>) for le!-aligned and inline-block controls. This
only applies to forms within viewports that are at least
768px wide.
46. HORIZONTAL FORMSHORIZONTAL FORMS
Bootstrap's predefined grid classes can align labels and
groups of form controls in a horizontal layout by adding
.form-horizontal to the form.
50. SIDE BY SIDESIDE BY SIDE
<label for="expirationDate">Expiration date</label>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select name="month" id="month" class="form-control">
...
<div class="col-md-3">
<div class="form-group">
<select name="year" id="year" class="form-control">
51. HEARD IT ON THE RADIO...HEARD IT ON THE RADIO...
<div class="radio">
<label>
<input type="radio" name="shippingOptions" id="freeShipping"
value="0" checked>
Free Shipping
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="shippingOptions" id="twoDayShipping"
value="2">
Two Day Shipping
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="shippingOptions" id="nextDayShipping"
value="1" disabled>
Next Day Shipping (sorry this option not available)
</label>
</div>
52. CHECK 1, CHECK 2...CHECK 1, CHECK 2...
<div class="checkbox">
<label>
<input type="checkbox" id="saveInfo"> Save my information
</label>
</div>
53. HELP!HELP!
Help text should be explicitly associated with the form
control it relates to using the aria-describedby attribute.
<input type="text" id="inputHelpBlock" class="form-control"
aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that
breaks onto a new line and may extend beyond one line.</span>
54. VALIDATION STATESVALIDATION STATES
Bootstrap includes validation styles for error, warning, and
success states on form controls. To use, add .has-
warning, .has-error, or .has-success to the parent
element.
<div class="form-group has-error">
<label class="control-label" for="inputErr1">Input with error
</label>
<input type="text" class="form-control" id="inputErr1">
</div>
56. ICONSICONS
You can also add optional feedback icons with the addition
of .has-feedback and the right icon.
<div class="form-group has-success has-feedback">
<label class="control-label" for="success">Input with success</la
bel>
<input type="text" class="form-control" id="success"
aria-describedby="successStatus">
<span class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span>
<span id="successStatus" class="sr-only">(success)</span>
</div>
57. ALERTSALERTS
Wrap any text and an optional dismiss button in .alert and
one of the four contextual classes:
success
info
warning
danger
58. ALERTSALERTS
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Oh snap!!</strong> Change a few things up and try submit
ting again.
</div>