Click to edit

Master subtitle
style

Module 5 JavaScript Functions

Jon Galloway Senior Technical Evangelist
Christopher Harrison Content Developer

JavaScript and Bootstrap

Configuring Bootstrap and JavaScript
Enhancing UI
Interacting with the user

Configuring Bootstrap and JavaScript

All JavaScript functions
bootstrap.js
bootstrap.min.js
Individual files available

jQuery required
Most functionality are enabled by adding attributes
and classes

Modal Dialogs
Configure dialog using classes
Container: modal
Configure dialog: modal-dialog
Content: modal-content
Header: modal-header
Content: modal-content
Footer: modal-footer

Configure launcher using classes

data-toggle="modal"
data-target="<id>"

Configure closer
data-dismiss="modal"

DEMO
Hello, Dialog

Alerts
Subtle information
Background task completed
Operation on prior page completed

Added with classes

alert
alert-type

Success
Info
Warning
Danger

Add alert-dismissible to make the alert dismissible

DEMO
Adding Alerts

Providing Help
Whenever possible, provide inline help
Bootstrap offers two main options
Tooltip for mouseover
Popover for a click

DEMO
Providing Help

Adding Tabs
Create nav tabs
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#reviews" role="tab" datatoggle="tab">Reviews</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#account" role="tab" data-toggle="tab">Account</a></li>
</ul>

Create tab content

<div class="tab-pane" id="reviews">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="account">...</div>

DEMO
Adding Tabs

Scrollspy
"Advanced tabs"
Tabs follow as the user scrolls
No JavaScript required
Does require a bit of setup

DEMO
Scrollspy vs Tabs

Accordion
Cross between Scrollspy and tabs
Only one section at a time
Vertical display

No JavaScript required
Does require a bit of setup

DEMO
Accordion

Carousel
Elegant way to display multiple pictures

No JavaScript required
Does require a bit of setup

DEMO
Carousel

Affix
Pin control to the page

No JavaScript required
Does require a bit of setup

DEMO
Affix

2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered
trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of
Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT
MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.