Dynamic Tabs/Pills in bootstrap
simple program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dyanmic tabs/pills in bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Dyanamic Tabs/Pills</h3>
<ul class="nav nav-tabs">
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-2</a></li>
<li><a href="#">Menu-3</a></li>
<li><a href="#">Menu-4</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade">
<h4>Menu-1</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h4>Menu-2</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="menu3" class="tab-pane fade">
<h4>Menu-3</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="menu4" class="tab-pane fade">
<h4>Menu-4</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
</div>
</div>
</div>
</nav>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Active tabs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dyanmic tabs/pills in bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Dyanamic Tabs/Pills</h3>
<ul class="nav nav-tabs">
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-2</a></li>
<li><a href="#">Menu-3</a></li>
<li><a href="#">Menu-4</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade">
<h4>Menu-1</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="menu2" class="tab-pane fade in active">
<h4>Menu-2</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="menu3" class="tab-pane fade">
<h4>Menu-3</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="menu4" class="tab-pane fade">
<h4>Menu-4</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
</div>
</div>
</div>
</nav>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Link tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dyanmic tabs/pills in bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Dyanamic Tabs/Pills</h3>
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#Menu1">Menu-1</a></li>
<li><a data-toggle="tab" href="#Menu2">Menu-2</a></li>
<li><a data-toggle="tab" href="#Menu3">Menu-3</a></li>
<li><a data-toggle="tab" href="#Menu4">Menu-4</a></li>
</ul>
<div class="tab-content">
<div id="Menu1" class="tab-pane fade">
<h4>Menu-1</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="Menu2" class="tab-pane fade">
<h4>Menu-2</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="Menu3" class="tab-pane fade">
<h4>Menu-3</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="Menu4" class="tab-pane fade">
<h4>Menu-4</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Pills link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dyanmic tabs/pills in bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Dyanamic Tabs/Pills</h3>
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#Menu1">Menu-1</a></li>
<li><a data-toggle="tab" href="#Menu2">Menu-2</a></li>
<li><a data-toggle="tab" href="#Menu3">Menu-3</a></li>
<li><a data-toggle="tab" href="#Menu4">Menu-4</a></li>
</ul>
<div class="pills-content">
<div id="Menu1" class="pills-pane fade">
<h4>Menu-1</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="Menu2" class="pills-pane fade">
<h4>Menu-2</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="Menu3" class="pills-pane fade">
<h4>Menu-3</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
<div id="Menu4" class="pills-pane fade">
<h4>Menu-4</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid eius qui ratione alias quae, tenetur cum rerum eligendi placeat. Quaerat voluptates illo maiores qui cumque, asperiores earum? Veritatis, ipsam voluptatem?</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
No comments:
Post a Comment