1. Module 5 – JavaScript Functions
Jon Galloway – Senior Technical Evangelist
Christopher Harrison – Content Developer

2. JavaScript and Bootstrap
Configuring Bootstrap and JavaScript
Enhancing UI
Interacting with the user

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

4. Modal Dialogs Configure dialog using classes
Container: modal
Configure dialog: modal-dialog
Content: modal-content
Header: modal-header
Footer: modal-footer
Configure launcher using classes
data-toggle="modal"
data-target="<id>"
Configure closer
data-dismiss="modal"

5. Hello, Dialog

6. Alerts Subtle information Added with classes
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

7. Adding Alerts

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

9. Providing Help

10. Adding Tabs Create nav tabs Create tab content
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#reviews" role="tab" data-toggle="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>

11. Adding Tabs

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

13. Scrollspy vs Tabs

14. Accordion Cross between Scrollspy and tabs No JavaScript required
Only one section at a time
Vertical display
No JavaScript required
Does require a bit of setup

15. Accordion

16. Carousel Elegant way to display multiple pictures
No JavaScript required
Does require a bit of setup

17. Carousel

18. Affix Pin control to the page No JavaScript required
Does require a bit of setup

19. Affix