Suggested Video Tutorials
Part 39 - Bootstrap accordion with arrows
Part 40 - Bootstrap modal popup
Part 41 - Bootstrap modal methods and events
In this video we will discuss the Bootstrap tabs plugin.
The following example creates 3 tabs (Home, Contact & Locations). Locations dropdown contain 2 more tabs (India and USA)
Classes that are useful for customizing the behaviour of the tabs plugin
Part 39 - Bootstrap accordion with arrows
Part 40 - Bootstrap modal popup
Part 41 - Bootstrap modal methods and events
In this video we will discuss the Bootstrap tabs plugin.
The following example creates 3 tabs (Home, Contact & Locations). Locations dropdown contain 2 more tabs (India and USA)
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Bootstrap tutorial for
begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br />
<div class="container">
<div class="row">
<div class="col-xs-6">
<ul class="nav nav-tabs">
<li class="active">
<a href="#homeTab" data-toggle="tab">Home</a>
</li>
<li>
<a href="#contactTab" data-toggle="tab">Contact</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Locations <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#indiaTab" data-toggle="tab">India</a></li>
<li><a href="#usaTab" data-toggle="tab">USA</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="homeTab" class="tab-pane
active">
<h3>Home</h3>
<p>Home page content</p>
</div>
<div id="contactTab" class="tab-pane">
<h3>Contact</h3>
<p>Contact page content</p>
</div>
<div id="indiaTab" class="tab-pane">
<h3>India</h3>
<p>India Location Details</p>
</div>
<div id="usaTab" class="tab-pane">
<h3>USA</h3>
<p>USA Location Details</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Classes that are useful for customizing the behaviour of the tabs plugin
| Class | Description |
|---|---|
| fade | Animates the tabs to fade in. The first tab pane must also have in class to make the initial content visible |
| nav-justified | To make the tabs plugin span the entire width of the parent container |
i want to raise c# event "call method" when i click on specific tab
ReplyDeleteThis is not Web forms . you need jquery to call C# method.
ReplyDeletehi Sir, for me the bootstrap nav-tabs is not working. Its just showing as hyperlink. please help.
ReplyDeletehi
ReplyDeletecould u please show how the jquery/java script loooks for this? since it needs linking i believe!!