From the course: Bootstrap 3 Essential Training
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Controlling tabs with JavaScript - Bootstrap Tutorial
From the course: Bootstrap 3 Essential Training
Controlling tabs with JavaScript
- Tabs are a great way to organize certain types of content in a very concise base. They're pretty easy to do with Bootstrap, so let's take a look at what you would need to change this series of different categories into tabs. So, first, there's going to be two pieces that we have to make. The first one is the actual tabs. To do that, we're going to need a list so that can be a UL with a class of "nav," like this. And then inside, we're going to need list items and in addition to the class of "nav," we're going to specify the navtype here, so you can say either "nav-tabs" or "nav-pills" depending on the design that you want. Let's go ahead and go with tabs first. We'll also need to add a role, this is for screen readers, of "tablist." So this just identifies this as something that will be a tablist. The screen readers will know what to do with this type of element if we give it a role. So, each one of the list items will also need a role, and in this case the role will be…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.