Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RAPID PROTOTYPINGRAPID PROTOTYPING
WITH BOOTSTRAPWITH BOOTSTRAP
WHO ARE YOU?WHO ARE YOU?
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 Bo...
OUR PROTOTYPEOUR PROTOTYPE
LET’S GET STARTEDLET’S GET STARTED
BOOTSTRAP BITS...BOOTSTRAP BITS...
!! css/
"!! bootstrap.css
"!! bootstrap.css.map
"!! bootstrap.min.css
"!! bootstrap-the...
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="...
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...
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">Bu...
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</butt...
BUTTONSBUTTONS
SIZESSIZES
Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
BLOCK LEVELBLOCK LEVEL
Create block level...
LESSON 7LESSON 7
FOOTERSFOOTERS
or the lawyer part.
FOOTERFOOTER
One of the new tags introductioned in HTML5, was the
footer tag
<footer>
<p>&copy; Some Company 2015</p>
</fo...
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 s...
CATALOG PAGE V2CATALOG PAGE V2
THUMBNAIL SNIPPETTHUMBNAIL SNIPPET
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="img...
GLYPHSGLYPHS
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 c...
TABSTABS
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="a...
LESSON 10LESSON 10
BUILDING A CHECKOUT PAGEBUILDING A CHECKOUT PAGE
or what forms are for...
FORMSFORMS
FORM-GROUPSFORM-GROUPS
<div class="form-group">
<label for="ccname">Name (as it appears on your card)</label>
<input type=...
INLINE FORM ELEMENTSINLINE FORM ELEMENTS
Add .form-inline to your form (which doesn't have to
be a <form>) for le!-aligned...
HORIZONTAL FORMSHORIZONTAL FORMS
Bootstrap's predefined grid classes can align labels and
groups of form controls in a hor...
HORIZONTAL FORMSHORIZONTAL FORMS
<form class="form-horizontal">
<div class="form-group">
<label for="ccname" class="col-sm...
SELECT MENUSSELECT MENUS
<div class="form-group">
<select name="month" id="month" class="form-control">
<option value="01"...
SELECT MENUSSELECT MENUS
<div class="form-group">
<select name="year" id="year" class="form-control">
<option value="2015"...
SIDE BY SIDESIDE BY SIDE
<label for="expirationDate">Expiration date</label>
<div class="row">
<div class="col-md-4">
<div...
HEARD IT ON THE RADIO...HEARD IT ON THE RADIO...
<div class="radio">
<label>
<input type="radio" name="shippingOptions" id...
CHECK 1, CHECK 2...CHECK 1, CHECK 2...
<div class="checkbox">
<label>
<input type="checkbox" id="saveInfo"> Save my inform...
HELP!HELP!
Help text should be explicitly associated with the form
control it relates to using the aria-describedby attrib...
VALIDATION STATESVALIDATION STATES
Bootstrap includes validation styles for error, warning, and
success states on form con...
ICONSICONS
ICONSICONS
You can also add optional feedback icons with the addition
of .has-feedback and the right icon.
<div class="for...
ALERTSALERTS
Wrap any text and an optional dismiss button in .alert and
one of the four contextual classes:
success
info
w...
ALERTSALERTS
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dis...
BOOTSTRAP+BOOTSTRAP+
OTHER COMPONENTSOTHER COMPONENTS
Affix
Badges
Breadcrumbs
Button groups
Carousels
Collapse
Dropdown
Input groups
Jumbotron
...
STYLINGSTYLING
STYLINGSTYLING
.navbar {
margin-bottom: 0;
border-radius: 0;
}
footer {
margin-top: 20px;
padding-top: 20px;
padding-left:...
THEMESTHEMES
GUI TOOLGUI TOOL
jetstrap.com
RESOURCESRESOURCES
bootsnipp.com/resources
stackoverflow.com/
expo.getbootstrap.com/resources/
startbootstrap.com/bootstra...
THANK YOU!THANK YOU!
Chris Griffith
@chrisgriffith
http://chrisgriffith.wordpress.com
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Upcoming SlideShare
Loading in …5
×

Rapid HTML Prototyping with Bootstrap - Chris Griffith

1,354 views

Published on

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.

Published in: Design
  • Be the first to comment

Rapid HTML Prototyping with Bootstrap - Chris Griffith

  1. 1. RAPID PROTOTYPINGRAPID PROTOTYPING WITH BOOTSTRAPWITH BOOTSTRAP
  2. 2. WHO ARE YOU?WHO ARE YOU?
  3. 3. SYSTEM SETUPSYSTEM SETUP Google Chrome ( ) Brackets ( ) Course files google.com/chrome/ brackets.io
  4. 4. AGENDAAGENDA Prototype Review Introduction to Bootstrap Understanding the Grid System Using Bootstap Components Styling Bootstrap
  5. 5. OUR PROTOTYPEOUR PROTOTYPE
  6. 6. LET’S GET STARTEDLET’S GET STARTED
  7. 7. 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
  8. 8. LESSON 1LESSON 1 BOOTSTRAP BASICSBOOTSTRAP BASICS
  9. 9. LESSON 2LESSON 2 HEADERSHEADERS
  10. 10. 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.
  11. 11. LESSON 3LESSON 3 FRONT PAGE HEROSFRONT PAGE HEROS
  12. 12. LESSON 4LESSON 4 UNDERSTANDING THE GRID SYSTEMUNDERSTANDING THE GRID SYSTEM
  13. 13. UNDERSTANDING THE GRID SYSTEMUNDERSTANDING THE GRID SYSTEM
  14. 14. 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>
  15. 15. LESSON 5LESSON 5 APPLYING THE GRIDAPPLYING THE GRID
  16. 16. LESSON 6LESSON 6 BUTTONSBUTTONS or it's all about the click...
  17. 17. 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">
  18. 18. <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>
  19. 19. 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.
  20. 20. LESSON 7LESSON 7 FOOTERSFOOTERS or the lawyer part.
  21. 21. FOOTERFOOTER One of the new tags introductioned in HTML5, was the footer tag <footer> <p>&copy; Some Company 2015</p> </footer>
  22. 22. LESSON 8LESSON 8 BUILDING A CATALOG PAGEBUILDING A CATALOG PAGE
  23. 23. PLACEHOLDERPLACEHOLDER http://placehold.it/
  24. 24. 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> ...
  25. 25. CATALOG PAGE V2CATALOG PAGE V2
  26. 26. 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> ...
  27. 27. GLYPHSGLYPHS
  28. 28. GLYPHSGLYPHS <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true">< /span>
  29. 29. LESSON 9LESSON 9 BUILDING A DETAILS PAGEBUILDING A DETAILS PAGE Tables and Tabs
  30. 30. 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">
  31. 31. TABSTABS <div role="tabpanel"> <!-- Nav tabs --> <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> <!-- Tab panes --> <div class="tab-content"> ... </div> </div>
  32. 32. LESSON 10LESSON 10 BUILDING A CHECKOUT PAGEBUILDING A CHECKOUT PAGE or what forms are for...
  33. 33. FORMSFORMS
  34. 34. 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>
  35. 35. 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.
  36. 36. 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.
  37. 37. HORIZONTAL FORMSHORIZONTAL FORMS <form class="form-horizontal"> <div class="form-group"> <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> <div class="form-group"> <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>
  38. 38. SELECT MENUSSELECT MENUS <div class="form-group"> <select name="month" id="month" class="form-control"> <option value="01">01 - January</option> <option value="02">02 - February</option> ... </select> </div>
  39. 39. SELECT MENUSSELECT MENUS <div class="form-group"> <select name="year" id="year" class="form-control"> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select> </div>
  40. 40. 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">
  41. 41. 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>
  42. 42. CHECK 1, CHECK 2...CHECK 1, CHECK 2... <div class="checkbox"> <label> <input type="checkbox" id="saveInfo"> Save my information </label> </div>
  43. 43. 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>
  44. 44. 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>
  45. 45. ICONSICONS
  46. 46. 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>
  47. 47. ALERTSALERTS Wrap any text and an optional dismiss button in .alert and one of the four contextual classes: success info warning danger
  48. 48. 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>
  49. 49. BOOTSTRAP+BOOTSTRAP+
  50. 50. OTHER COMPONENTSOTHER COMPONENTS Affix 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
  51. 51. STYLINGSTYLING
  52. 52. STYLINGSTYLING .navbar { margin-bottom: 0; border-radius: 0; } footer { margin-top: 20px; padding-top: 20px; padding-left: 5%; border-top: 1px solid #ccc; }
  53. 53. THEMESTHEMES
  54. 54. GUI TOOLGUI TOOL jetstrap.com
  55. 55. RESOURCESRESOURCES bootsnipp.com/resources stackoverflow.com/ expo.getbootstrap.com/resources/ startbootstrap.com/bootstrap-resources/
  56. 56. THANK YOU!THANK YOU! Chris Griffith @chrisgriffith http://chrisgriffith.wordpress.com

×