Welcome to Part 4 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:
Part 4 – Bootstrap Components
Page Header and Breadcrumbs
We first see the page-header class in action, which creates a section with spacing around it. A page header may be just the page title, or a large section of content, depending on your requirements.
Beginning at 2:24, Shawn explains the purpose of breadcrumbs and demonstrates their use with the Bootstrap breadcrumb class. He applies this class to an ol (ordered list) tag and puts the breadcrumb elements inside the li elements within it. The active class is applied to the last element in this list to highlight the active page.
If you have related buttons, you may want to emphasize that by grouping them together. This is exactly what the button-group class if for, and we see how to apply it here. You can think of button groups as like radio buttons, but with a different look and feel.
We see a variety of looks for the button group: vertical, horizontal, smaller and larger.
Then we learn how to make the buttons “toggle-able”, effectively check-boxes or radio buttons styled to look like buttons.
Buttons are often easier to use than check-boxes on touch devices such as smart phones.
We first that by combining the dropdown and dropdown-menu class with the tabindex attribute to create an invisible dropdown list.
We can then make the list visible by setting the dropdown-menu element’s display to block.
Shawn then makes an element inactive with the disabled class, and separates the list with a divider. Finally, we see a show me button which toggles the visibility of the dropdown list.
Also see dropdowns on the bootstrap site.
We see that we can put caret symbols inside our button to make it clearer that this button is for displaying a dropdown list.
Also see Btn-groups-nestedon the bootstrap site.
Using a Dropdown for a Select
Input Groups allow us to add explanatory symbols onto the left or right hand side of a textbox. Here we see an email @ symbol, and a ! symbol.
These are added in spans and could display anything you want, including glyphicons.
Also see input groups on the bootstrap site.
Shawn demonstrates the pager class on an unordered list. This is an easy way to show decent looking previous and next page links.
We also see how to create a group of pages e.g. 1,2,3 etc, how to change their size, disabling a link, and setting one to active.
Also see pagination on the bootstrap site.
Also see thumbnails on the bootstrap site
On its own, use of the panel class looks awful, but when panel-body is added to a child div, we can appreciate the power of the panel style. Use of panel-heading with panel-default and panel-title creates a great header look.
The footer, specified with the panel-footer class, inherits the same style as panel-heading.
Also see panels on the bootstrap site.
Wells create a bordered, slightly sunken section in your design. We can set the size with classes such as well-sm and well-lg