Home > DeveloperSection > Blogs > Tab using BootStrap in ASP.Net

Tab using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
2 Comment(s)
 9412  View(s)
Rate this:

Tab using BootStrap in ASP.Net

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



Boot Strap

By Abhishek Singh on   2 years ago
nice Article

bootstrap

By Abhishek Singh on   2 years ago
This blog was really help full.

Don't want to miss updates? Please click the below button!

Follow MindStick