rapid html prototyping with bootstrap - chris griffith

RAPID PROTOTYPINGRAPID PROTOTYPINGWITH BOOTSTRAPWITH BOOTSTRAP

WHO ARE YOU?WHO ARE YOU?

SYSTEM SETUPSYSTEM SETUPGoogle Chrome ( )Brackets ( )

Course files

google.com/chrome/brackets.io

AGENDAAGENDAPrototype ReviewIntroduction to BootstrapUnderstanding the Grid SystemUsing Bootstap ComponentsStyling Bootstrap

OUR PROTOTYPEOUR PROTOTYPE

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 1BOOTSTRAP BASICSBOOTSTRAP BASICS

LESSON 2LESSON 2HEADERSHEADERS

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 3FRONT PAGE HEROSFRONT PAGE HEROS

LESSON 4LESSON 4UNDERSTANDING 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 5APPLYING THE GRIDAPPLYING THE GRID

LESSON 6LESSON 6BUTTONSBUTTONS

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>

BUTTONSBUTTONSSIZESSIZES

Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

BLOCK LEVELBLOCK LEVEL

Create block level buttons—those that span the full width ofa parent— by adding .btn-block.

DISABLED STATEDISABLED STATE

Add the disabled attribute to <button> buttons.

Add the .disabled class to <a> buttons.

LESSON 7LESSON 7FOOTERSFOOTERS

or the lawyer part.

FOOTERFOOTEROne of the new tags introductioned in HTML5, was the

footer tag <footer> <p>&copy; Some Company 2015</p> </footer>

LESSON 8LESSON 8BUILDING A CATALOG PAGEBUILDING A CATALOG PAGE

PLACEHOLDERPLACEHOLDERhttp://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 dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Add to Cart</a> </p> </div> </div> </div> ...

GLYPHSGLYPHS

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

LESSON 9LESSON 9BUILDING A DETAILS PAGEBUILDING A DETAILS PAGE

Tables and Tabs

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

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

LESSON 10LESSON 10BUILDING 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="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>

INLINE FORM ELEMENTSINLINE FORM ELEMENTSAdd .form-inline to your form (which doesn't have tobe a <form>) for le!-aligned and inline-block controls. This

only applies to forms within viewports that are at least768px wide.

HORIZONTAL FORMSHORIZONTAL FORMSBootstrap's predefined grid classes can align labels andgroups of form controls in a horizontal layout by adding

.form-horizontal to the form.

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>

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>

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>

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

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

ICONSICONSYou 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</label> <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>

ALERTSALERTSWrap any text and an optional dismiss button in .alert and

one of the four contextual classes:

successinfowarningdanger

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 submitting again. </div>

BOOTSTRAP+BOOTSTRAP+

OTHER COMPONENTSOTHER COMPONENTSAffixBadgesBreadcrumbsButton groupsCarouselsCollapseDropdownInput groupsJumbotronLabelsList group

Media objectModalsNavbarsNavsPaginationPanelsPopoversProgress barsResponsive embedScrollspyTooltipsTransitions

STYLINGSTYLING

STYLINGSTYLING .navbar { margin-bottom: 0; border-radius: 0; }

footer { margin-top: 20px; padding-top: 20px; padding-left: 5%; border-top: 1px solid #ccc; }

THEMESTHEMES

GUI TOOLGUI TOOL

jetstrap.com

RESOURCESRESOURCESbootsnipp.com/resourcesstackoverflow.com/expo.getbootstrap.com/resources/startbootstrap.com/bootstrap-resources/

THANK YOU!THANK YOU!Chris Griffith

@chrisgriffith

http://chrisgriffith.wordpress.com