Hi everyone in this article I’m explaining about bootstrap tabs with bootstrap.
Introduction:
This section explains how to create Twitter Bootstrap nav components. You can easily create nav components such as tabs and pills using Twitter Bootstrap. Bootstrap's nav components (tabs and pills) share the same base markup and styles through the .nav class.
Creating Tabs with Bootstrap:
Tab based navigations provides an easy and powerful mechanism to handle huge amount of content within a small area through separating content into different panes where each pane is viewable one at a time. The user can quickly access the content through switching between the panes without leaving the page. The following example will show you how to create a basic tab component with Bootstrap.
Let’s start:
Open visual studio >> File >> New Project >> ASP.NET MVC 4 Web Application
Now give the application name and click ok after click ok open a window where you select project type.
Now we install Bootstrap packages and jQuery library from Manage NuGet Packages.
Now we add HomeController and index view for use bootstrap classes.
Now we linked four files in index view
<linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
<linkhref="~/Content/bootstrap-theme.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script>
<scriptsrc="~/Scripts/bootstrap.min.js"></script>
You can use .nav-tabs class with the base class .nav. The following example will show you how to create a basic tab component using Bootstrap.
HTML Code:
<divclass="container">
<ulclass="nav nav-tabs">
<liclass="active"><ahref="#">Article</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Forum</a></li>
<li><ahref="#">Interview</a></li>
</ul>
</div>
Similarly you can use the .nav-pills class with base class .nav without any further change in markup.
HTML Code:
<ulclass="nav nav-pills">
<liclass="active"><ahref="#">Article</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Forum</a></li>
<li><ahref="#">Interview</a></li>
</ul>
Stacked Pills Nav:
Pills navigations are horizontal by default. If you want to make vertical stacked pills navigation you just add an extra class .nav-stacked.HTML Code:
<ulclass="nav nav-pills nav-stacked">
<liclass="active"><ahref="#">Article</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Forum</a></li>
<li><ahref="#">Interview</a></li>
</ul>
Creating the Dropdown with Twitter Bootstrap Tabs and Pills:
You can add dropdown menus to a link inside tabs and pills navigation with a little extra markup and including JavaScript library files jquery.js and bootstrap.js in your HTML file.
HTML Code:
<ulclass="nav nav-tabs">
<liclass="active"><ahref="#">Article</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Forum</a></li>
<li><ahref="#">Interview</a></li>
<liclass="dropdown"><ahref="#"data-toggle="dropdown"class="dropdown-toggle">Technologies <bclass="caret"></b></a>
<ulclass="dropdown-menu">
<li><ahref="#">Java</a></li>
<li><ahref="#">C++</a></li>
<li><ahref="#">Asp.Net</a></li>
<liclass="divider"></li>
<li><ahref="#">HTML</a></li>
</ul>
</li>
</ul>
To create the Pills with Dropdowns you will changed the .nav-tabs to .nav-pills.
HTML Code:
<ulclass="nav nav-pills">
<liclass="active"><ahref="#">Article</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Forum</a></li>
<li><ahref="#">Interview</a></li>
<liclass="dropdown"><ahref="#"data-toggle="dropdown"class="dropdown-toggle">Category <bclass="caret"></b></a>
<ulclass="dropdown-menu">
<li><ahref="#">Java</a></li>
<li><ahref="#">C++</a></li>
<li><ahref="#">Asp.Net</a></li>
<liclass="divider"></li>
<li><ahref="#">HTML</a></li>
</ul>
</li>
</ul>
Leave Comment