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:-
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Tab.aspx.cs"Inherits="Tab"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
<divid="tab1">
<ulrole="tablist">
<li><ahref="#tabs-a">First</a></li>
<li><ahref="#tabs-b">Second</a></li>
<li><ahref="#tabs-c">Third</a></li>
</ul>
<divid="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>
<divid="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>
<divid="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>
<scripttype="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 :-
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="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
Abhishek Singh
22-Jan-2014Abhishek Singh
21-Jan-2014