As we have already seen in the previous posts that bootstrap gives you a lot of different ways that you can display out data for example by using columns etc. Now if we want our large chunk of data to shrink down we can use tabs , carousel etc. In this post we will be seeing how tabs help us to enhance data display in Bootstrap.
In order to create the tab section, you need to create an un-ordered list of links, similar to the list of links displayed in navbar. You need nav and nav-tabs classes and have to set us the role as tablist.
<ul class="nav nav-tabs" role="tablist">
//tab links
</ul>
The tab links inside the unordered list needs role="tab" and data-toggle="tab" set on them. The href attribute in the tab links should point to the ID of the container of the data content.
<li class="active"><a href="#first" role="tab" data-toggle="tab">First</a></li
<li><a href="#second" role="tab" data-toggle="tab">Second</a></li>
The tab content should be placed below the tabs, and inside of div element having tab-content class.
<div class="tab-content">
//tabs
</div>
Now the tabs should be inside the div elements having the class tab-pane. You can aslo add active class on the tab which you want to display. To enable animation you can even ass fade class, and for the first tab instead of only fade you will need fade in.
<div class="active tab-pane fade" id="first">
//Content
</div>
Tab Example :
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#first" role="tab" data-toggle="tab">First </a></li>
<li><a href="#second" role="tab" data-toggle="tab">Second </a></li>
<li><a href="#third" role="tab" data-toggle="tab">Third </a></li>
<li><a href="#fourth" role="tab" data-toggle="tab">Fourth </a></li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="first">
<h2>First Tab<h2>
<div>This is my first tab</div>
</div>
<div class="tab-pane fade" id="second">
<h2>Second Tab<h2>
<div>This is my second tab</div>
</div>
<div class="tab-pane fade" id="third">
<h2>Third Tab<h2>
<div>This is my third tab</div>
</div>
<div class="tab-pane fade" id="fourth">
<h2>Fourth Tab<h2>
<div>This is my fourth tab</div>
</div>
</div>
</div>
Result :
Please Like and Share the Blog, if you find it interesting and helpful.
In order to create the tab section, you need to create an un-ordered list of links, similar to the list of links displayed in navbar. You need nav and nav-tabs classes and have to set us the role as tablist.
<ul class="nav nav-tabs" role="tablist">
//tab links
</ul>
The tab links inside the unordered list needs role="tab" and data-toggle="tab" set on them. The href attribute in the tab links should point to the ID of the container of the data content.
<li class="active"><a href="#first" role="tab" data-toggle="tab">First</a></li
<li><a href="#second" role="tab" data-toggle="tab">Second</a></li>
The tab content should be placed below the tabs, and inside of div element having tab-content class.
<div class="tab-content">
//tabs
</div>
Now the tabs should be inside the div elements having the class tab-pane. You can aslo add active class on the tab which you want to display. To enable animation you can even ass fade class, and for the first tab instead of only fade you will need fade in.
<div class="active tab-pane fade" id="first">
//Content
</div>
Tab Example :
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#first" role="tab" data-toggle="tab">First </a></li>
<li><a href="#second" role="tab" data-toggle="tab">Second </a></li>
<li><a href="#third" role="tab" data-toggle="tab">Third </a></li>
<li><a href="#fourth" role="tab" data-toggle="tab">Fourth </a></li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="first">
<h2>First Tab<h2>
<div>This is my first tab</div>
</div>
<div class="tab-pane fade" id="second">
<h2>Second Tab<h2>
<div>This is my second tab</div>
</div>
<div class="tab-pane fade" id="third">
<h2>Third Tab<h2>
<div>This is my third tab</div>
</div>
<div class="tab-pane fade" id="fourth">
<h2>Fourth Tab<h2>
<div>This is my fourth tab</div>
</div>
</div>
</div>
Result :
No comments:
Post a Comment