TABS

~ micaktvrtko

Tabs allow you to display data in different pages, each one with a tab title on top of it. Tabs are perfect for scenarios when you have a lot of data to display, but the user only needs it in smaller chunks, displayed one at a time. One key thing to remember about using tabs is they are restricting the user’s ability to scroll.

TABS SYNTAX

Tabs

In order to create the tabs section, you need to create an unordered list of links, similar to a list of links displayed in navbar. You need to decorate the ul element with the nav and nav-tabs classes, and set the roleas tablist.

  1. <ulclass=”nav nav-tabs” role=”tablist”>
  2. <!– tab links –>
  3. </ul>

The links need role=’tab’ and data-toggle=’tab’ set on them. In additon, the href attribute needs to be set to the ID of the container of the content you wish to display on that tab. For example, if the div that contains the data to display has an ID of Demo, you need to set the href of the link to be #Demo. Note again that when you target content for Bootstrap, you need to use the CSS selector syntax. In addition, you add active to the first one.

  1. <liclass=”active”><a href=”#tabs-first” role=”tab” data-toggle=”tab”>First</a></li>
  2. <li><ahref=”#tabs-second” role=”tab” data-toggle=”tab”>Second</a></li>

Tab content

The tab content is placed below the tabs, and inside of a containing div element with the tab-content class.

Each pane, or block of content to display under a tab, is also placed inside of containing div elements. Each container needs to be decorated with the tab-pane class. In addition, you add active to the first one to be displayed. Optionally, you can add the attribute fade to each pane to enable animation, and fade in to the first tab to be displayed to ensure it’s shown to the user.