Learn your way! Get started

Bootstrap 3.1, Part 4 of 4: JavaScript

with expert Adam Barney


Watch trailer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 8/11/2014
Level Intermediate
Runtime 1h 36m
Closed captioning Included
Transcript Included
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

It’s time for JavaScript to take the center stage! Bootstrap comes loaded with a ton of great JavaScript plugins to help us create powerful and engaging sites for our customers and users. We’ll capture the user’s attention with modal dialogs and create an auto-updating navigation element that remains fixed in the browser window as you scroll through your site. We’ll also add some interactive elements to your site as we show and hide content dynamically using the tab and collapse plugins, as well as provide some additional contextual content to our users in the form of tooltips ad popovers. This is when we take our site to the next level – not only will it look good, but it will start behaving well too. Interactive and engaging – that’s what will hold your viewers attention – Let’s see how Bootstrap will help us deliver.

Prerequisites

This course assumes that the users have an understanding of developing web applications using HTML, ASP.NET, and JavaScript in any development environment. The user should have already viewed ‘Bootstrap 3.1: Introduction and Installing’, ‘Bootstrap 3.1: Base CSS’, and ‘Bootstrap 3.1: Components’ before viewing this course.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

Adam Barney has been writing code in one form or another since the 4th grade and has been 100% focused on .NET since 2005. He is currently a senior-level consultant living in Lincoln, NE where he co-founded and runs both the Lincoln .NET Users Group and Nebraska Code Camp. Adam also enjoys speaking at user groups, code camps, and developer conferences in the Midwest.

Course outline



JavaScript

Modals (13:10)
  • Introduction (00:37)
  • Data Attributes and JavaScript (00:57)
  • Modal Dialogs (01:32)
  • Opening a Modal Dialog (01:44)
  • Demo: Modal Dialog - delete (04:35)
  • Demo: Modal Dialog - register (03:27)
  • Summary (00:15)
Scrollspy and Affix (19:23)
  • Introduction (00:48)
  • Scrollspy and Affix (01:14)
  • Using Scrollspy (01:06)
  • Using Affix (01:37)
  • Affix Positioning (02:31)
  • Demo: Scrollspy (03:16)
  • Demo: Scrollspy and Affix (03:08)
  • Demo: Offsets (05:09)
  • Summary (00:30)
Tabs and Collapse (15:43)
  • Introduction (00:37)
  • Tabs and Collapsible Regions (01:01)
  • Tab Setup (00:41)
  • Using Tabs (01:01)
  • Collapse (Accordion) Setup (01:07)
  • Using Collapse (01:32)
  • Non-Accordion Collapsing (00:58)
  • Demo: Tabs (03:03)
  • Demo: Collapsible (05:18)
  • Summary (00:21)
Tooltips and Popovers (11:51)
  • Introduction (00:23)
  • Tooltips vs Popovers (01:33)
  • Using Tooltips (00:58)
  • Using Popovers (01:15)
  • Demo: Tooltips (03:42)
  • Demo: Popovers (03:42)
  • Summary (00:15)
Updating the Blog (36:09)
  • Introduction (00:20)
  • Updating the Blog Site (01:15)
  • Demo: Blog - modal dialog (05:50)
  • Demo: Blog - affix (05:07)
  • Demo: Blog – collapse (03:26)
  • Demo: Blog – tabs (04:14)
  • Demo: Blog – popover - part 1 (04:54)
  • Demo: Blog – popover – part 2 (05:05)
  • Demo: Blog – popover – part 3 (05:03)
  • Summary (00:52)