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
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/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:
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Article</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">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:
<ul class="nav nav-pills">
<li class="active"><a href="#">Article</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">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:
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Article</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">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:
<ul class="nav nav-tabs">
<li class="active"><a href="#">Article</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Interview</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Technologies <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Asp.Net</a></li>
<li class="divider"></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
</ul>
To create the Pills with Dropdowns you will changed the
.nav-tabs to .nav-pills.
HTML Code:
<ul class="nav nav-pills">
<li class="active"><a href="#">Article</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Interview</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Category <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Asp.Net</a></li>
<li class="divider"></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
</ul>
Leave Comment