This code will demonstrate the tabbing feature of bootstrap.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
ul>li
{
padding-top:10px;
padding-bottom:10px;
font-size:24px;
}
</style>
</head>
<body>
<ul class="nav nav-justified nav-tabs">
<li><a href="#web" data-toggle="tab">Web design</a></li>
<li><a href="#development" data-toggle="tab" >Web development</a></li>
<li><a href="#android" data-toggle="tab">Android Development</a></li>
<li><a href="#IOS" data-toggle="tab">IOS Development</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade text-center" id="web">
<h1>Web design</h1>
<h3>We will learn about css,html,boostrap,js,jquery,angularJS and many other JS frameworks</h3>
</div>
<div class="tab-pane fade text-center" id="development">
<h1>Web Development</h1>
<h3>We will learn about asp.net,php,jsp,laravel,codeigniter and many other frameworks</h3>
</div>
<div class="tab-pane fade text-center" id="android">
<h1>Android development</h1>
<h3>We will learn about XML design,intent,service,activity and many more android programming features</h3>
</div>
<div class="tab-pane fade text-center" id="IOS">
<h1>IOS development</h1>
<h3>We will learn the language objective C,SWIFT and try to have a thorough knowledge of IOS programming</h3>
</div>
</div>
</body>
</html>
No comments:
Post a Comment