Shawn Wildermuth
Welcome to Part 5 of this review of the Pluralsight course Bootstrap 3 by Shawn Wildermuth.
Shawn is a 14-time Microsoft MVP (ASP.NET/IIS) and is involved with Microsoft as an ASP.NET Insider, ClientDev Insider and Windows Phone Insider.
He is the author of eight books on software development, and has given talks at a variety of international conferences including TechEd, Oredev, SDC, VSLive, DevIntersection, MIX, DevTeach, DevConnections and DevReach.
Bootstrap 3 is the final course in the learning path Front End Web Development.
Also in this series:
Bootstrap Plugins
In this module, Shawn creates a variety of “plugins” using the bootstrap classes and some JavaScript. There are also a number of prebuilt plugins available from startbootstrap.com
Collapse
collapse
The idea is to hide and show each section as you click on the buttons
We see that we just need to specify the collapse class in order to make it invisible.
Shawn also demonstrates the effect that the attribution style has.
Accordion
accordion
This is a more sophisticated control. We use the panel-group class with panel-collapse and collapse.
Modal Markup
Modal Events
This clip builds on the previous one to add more functionality to our modal dialog box.
We add some JavaScript to handle click events for the submit button and the reason dropdown list item.
Tab
Tooltip
Doing this involves more work than the documentation suggests. To add a tooltip to a button, the following HTML change
<input type=”submit” data-toggle=”tooltip” title=”Press Here”
data-placement=”right” data-delay=”500″ />
However, Shawn explains why this alone does not work. He then writes some JavaScript to get it working.
$(“#contactForm input[type=submit]”).tooltip()
We see that by default the tooltip is shown above the element and appears instantly. Shawn shows how to change the placement of the tooltip, either using JavaScript or an html data-placement attribute.
The delay before the tooltip appears is too complex to achieve with data- attributes, but we see that it can be done in JavaScript quite easily:
$(“#contactForm input[type=submit]”).tooltip({
delay { show : 500, hide: 0 }
});
Finally Shawn demonstrates using the data-html attribute to display a full piece of html markup in the tooltip. We see that we can, for example, put an image inside our tooltip.
Alert
The CSS class “alert” on its own does not do anything, but when Shawn adds alert-warning we see the element appear in yellow.
Inside of this Shawn adds a hyperlink with the data-dismiss attribute with class=”close” so that the user can make the alert disappear when they want. We see the “x” on the right hand side of the alert displayed for this.
We also see how to make the alert display only at the time we want it to, e.g. after submitting our form.
We also learn that the alert box is actually removed from the DOM when the user dismisses it. Shawn shows how to hide the alert rather than removing it from the DOM, so that we can get it to display multiple times.
Carousel Markup
CC BY-SA 3.0
A carousel is a set of rotating images. Achieving this with Bootstrap begins with adding the “carousel” class followed by the type of animation, e.g. “slide” or “fade”.
We see that we should also create an inner div with “carousel-inner”, which contains all of the images that we are going to use. Shawn also explains that carousel content could in fact be any sort of html content, but this demo shows rotating images.
Each image is wrapped inside a containing div with class=”item”
Shawn explains the data-interval attribute. We build on this work in the next clip.
Carousel Indicators
Shawn fully explains the following html as he writes it
<ol class=”carousel-indicators”>
<li data-target=”#theCarousel” data-slide-to=”0″ class=”active”></li>
<li data-target=”#theCarousel” data-slide-to=”1″></li>
<li data-target=”#theCarousel” data-slide-to=”2″></li>
<li data-target=”#theCarousel” data-slide-to=”3″></li>
</ol>
We see that there are now little white round indicators overlaying our carousel images, and the user can click on any one to go straight to the relevant image.
Carousel Navigation
We can add links to the previous and next images using just a small amount of HTML:
<a href=”#theCarousel” class=”carousel-control left” data-slide=”prev”>
<span class=”icon-prev”></span></a>
<a href=”#theCarousel” class=”carousel-control right” data-slide=”next”>
<span class=”icon-next”></span></a>
Carousel Captions
Here, Shawn demonstrate the “carousel-caption” class. Each caption is put inside each of our “item” elements.
Plugins Summary
Shawn explains that this module has covered the most commonly used plugins but there are others that you can find. You can get far by utilizing a minimum of JavaScript along with some data-* attributes, and this is explained in more clip in this summary clip.
Migrating to Bootstrap 3
If you have an existing Bootstrap version 1.x or 2.x website, this module will teach you how to migrate it over to Bootstrap version 3.
Version 3 is a big change, so migration isn’t trivial
Moving to Mobile-First is largest of the migration challenges
Class renaming is simple though can be tedious
Dealing with missing features from Bootstrap 2 shouldn’t be too difficult
Course Verdict
I have found Shawn’s course to be a great way to learn Bootstrap 3, and I’ve also found Bootstrap 3 to be a great framework which takes the chore out of many common user interface tasks.
There are times in software engineering when it pays to reinvent the wheel, but with most websites, reinventing the wheel is a waste of time and money. Bootstrap makes these common tasks easy, and it also helps the team to work in a consistent way.
There are dangers of too much sameness, as Shawn discusses in this course. But if you follow his advice, you should be able to create beautiful looking some sites with significantly less effort than you would need without the power of Bootstrap behind you.
Zombie Code Kill 