In this blog , I’m explaining how to make tabs using Bootstrap in ASP.Net
Example :-
In This Example we Create Tab Using BootStrap File
Form Design:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab.aspx.cs" Inherits="Tab" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Js/jquery-1.8.3.min.js"></script>
<script src="Js/jquery-ui-1.9.2.custom.min.js"></script>
<link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="tab1">
<ul role="tablist">
<li><a href="#tabs-a">First</a></li>
<li><a href="#tabs-b">Second</a></li>
<li><a href="#tabs-c">Third</a></li>
</ul>
<div id="tabs-a">
<p>Hello How Are You ?</p>
<p>I Talk About India</p>
<p>India Is Religon And Agriculture Country</p>
<p>In India You can Visit Historical Place</p>
<p>Like that TajMahal,Sangam,Rameshwaram,</p>
</div>
<div id="tabs-b">
<p>Hello How Are You ?</p>
<p>I Talk About It Sectore</p>
<p>In It Sectore You can find job </p>
</div>
<div id="tabs-c">
<p>Nam dui erat, auctor a,</p>
<p>dignissim quis, sollicitudin eu, felis.</p>
<p>Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#tab1').tabs();
});
</script>
Firstly create one <div> tag and give the id tab1 then create <ul> tag inside tab1 <div> then create three <li> tag inside <ul> tag and create one hyperlink inside every <li> tag . then after create three div tag and write our code . then call tabs() method on tab1<div> inside the $(document).ready(function () {} function .
Use this BootStrap File :-
<script src="Js/jquery-1.8.3.min.js"></script>
<script src="Js/jquery-ui-1.9.2.custom.min.js"></script>
<link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
Download and add the above three files into your projects because it’s mandatory for using the bootstrap libraries and methods.
Use tabs Method :-
<script type="text/javascript">
$(document).ready(function () {
$('#tab1').tabs();//tab method
});
</script>
Output
in my next post i'll explain about Record insert and retrieve using sqlite database in nodejs in Windows OS 64
Leave Comment
2 Comments