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.
