Rapid HTML Prototyping with Bootstrap - Chris Griffith

RAPID PROTOTYPINGRAPID PROTOTYPING
WITH BOOTSTRAPWITH BOOTSTRAP

SYSTEM SETUPSYSTEM SETUP
Google Chrome ( )
Brackets ( )
Course files
google.com/chrome/
brackets.io

AGENDAAGENDA
Prototype Review
Introduction to Bootstrap
Understanding the Grid System
Using Bootstap Components
Styling Bootstrap

LET’S GET STARTEDLET’S GET STARTED

BOOTSTRAP BITS...BOOTSTRAP BITS...
!! css/
"!! bootstrap.css
"!! bootstrap.css.map
"!! bootstrap.min.css
"!! bootstrap-theme.css
"!! bootstrap-theme.css.map
#!! bootstrap-theme.min.css
!! js/
"!! bootstrap.js
#!! bootstrap.min.js
!! fonts/
"!! glyphicons-halflings-regular.eot
"!! glyphicons-halflings-regular.svg
"!! glyphicons-halflings-regular.ttf
"!! glyphicons-halflings-regular.woff
#!! glyphicons-halflings-regular.woff2

LESSON 1LESSON 1
BOOTSTRAP BASICSBOOTSTRAP BASICS

LESSON 2LESSON 2
HEADERSHEADERS

CONTAINERSCONTAINERS
<div class="container">
...
</div
Use .container for a responsive fixed width container.
<div class="container-fluid">
...
</div
Use .container-fluid for a full width container, spanning the entire width of your viewport.

LESSON 3LESSON 3
FRONT PAGE HEROSFRONT PAGE HEROS

LESSON 4LESSON 4
UNDERSTANDING THE GRID SYSTEMUNDERSTANDING THE GRID SYSTEM

UNDERSTANDING THE GRID SYSTEMUNDERSTANDING THE GRID SYSTEM

CUSTOM CSSCUSTOM CSS
<style>
div {
background-color: #ccc;
border: 1px solid #444;
}
.row {
background-color: #fff;
border: none;
padding-top: 10px;
}
.container {
margin-top: 5px;
background-color: #fff;
border: none;
}
</style>

LESSON 5LESSON 5
APPLYING THE GRIDAPPLYING THE GRID

LESSON 6LESSON 6
BUTTONSBUTTONS
or it's all about the click...

BUTTONSBUTTONS
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

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.

LESSON 7LESSON 7
FOOTERSFOOTERS
or the lawyer part.

FOOTERFOOTER
One of the new tags introductioned in HTML5, was the
footer tag
<footer>
<p>© Some Company 2015</p>
</footer>

LESSON 8LESSON 8
BUILDING A CATALOG PAGEBUILDING A CATALOG PAGE

PLACEHOLDERPLACEHOLDER
http://placehold.it/

THUMBNAIL SNIPPETTHUMBNAIL SNIPPET
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="imgs/192x200.gif" alt="...">
</a>
</div>
...

CATALOG PAGE V2CATALOG PAGE V2

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>
...

GLYPHSGLYPHS
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"><
/span>

LESSON 9LESSON 9
BUILDING A DETAILS PAGEBUILDING A DETAILS PAGE
Tables and Tabs

TABLESTABLES
Basic table: <table class="table">
Striped rows: <table class="table table-striped">
Bordered table: <table class="table table-bordered">
Hover rows: <table class="table table-hover">

TABSTABS
<div role="tabpanel">

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home"
aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
...
</ul>

<div class="tab-content">
...
</div>
</div>

LESSON 10LESSON 10
BUILDING A CHECKOUT PAGEBUILDING A CHECKOUT PAGE
or what forms are for...

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>
<label for="ccnumber">Card number (no dashes or spaces)</label>
<input type="text" class="form-control" id="ccnumber">
</div>

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.

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.

HORIZONTAL FORMSHORIZONTAL FORMS
<form class="form-horizontal">
<label for="ccname" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ccname">
</div>
</div>
<label for="ccnumber" class="col-sm-2 control-label">Card number
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ccnumber">
</div>
</div>

SELECT MENUSSELECT MENUS
<select name="month" id="month" class="form-control">
<option value="01">01 - January</option>
<option value="02">02 - February</option>
...
</select>
</div>

SELECT MENUSSELECT MENUS
<select name="year" id="year" class="form-control">
<option value="2015">2015</option>
</select>
</div>

SIDE BY SIDESIDE BY SIDE
<label for="expirationDate">Expiration date</label>
<div class="row">
<div class="col-md-4">
<select name="month" id="month" class="form-control">
...
<div class="col-md-3">
<select name="year" id="year" class="form-control">

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>

CHECK 1, CHECK 2...CHECK 1, CHECK 2...
<div class="checkbox">
<label>
<input type="checkbox" id="saveInfo"> Save my information
</label>
</div>

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>

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>

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>

ALERTSALERTS
Wrap any text and an optional dismiss button in .alert and
one of the four contextual classes:
success
info
warning
danger

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>

OTHER COMPONENTSOTHER COMPONENTS
Aﬀix
Badges
Breadcrumbs
Button groups
Carousels
Collapse
Dropdown
Input groups
Jumbotron
Labels
List group
Media object
Modals
Navbars
Navs
Pagination
Panels
Popovers
Progress bars
Responsive embed
Scrollspy
Tooltips
Transitions

STYLINGSTYLING
.navbar {
margin-bottom: 0;
border-radius: 0;
}
footer {
margin-top: 20px;
padding-top: 20px;
padding-left: 5%;
border-top: 1px solid #ccc;
}

RESOURCESRESOURCES
bootsnipp.com/resources
stackoverflow.com/
expo.getbootstrap.com/resources/
startbootstrap.com/bootstrap-resources/

THANK YOU!THANK YOU!
Chris Griffith
@chrisgriffith
http://chrisgriffith.wordpress.com

Rapid HTML Prototyping with Bootstrap - Chris Griffith

Related slideshows

More Related Content

Rapid HTML Prototyping with Bootstrap - Chris Griffith