Collapse in bootstrap
<!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>Collapse</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Collapse</h3>
<button class="btn btn-success" data-toggle="Collapse" data-target="#box">CLick me</button>
<div id="box" class="collapse" style="background-color:teal;color: white;padding: 5px;"></div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Panel(Collapse)
<!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>PanelCollapse</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Panel Collapse</h3>
<div class="panel panel-default">
<div class="panel-heading">
<a href="#box2" data-toggle="Collapse">Heading</a>
</div>
<div id="box2" class="panel-collapse collapse">
</div>
<div class="panel-body" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti earum voluptatem consequatur tempora nobis voluptatum placeat quia tenetur quidem minima cumque culpa quae quasi nihil, vel provident deserunt cupiditate possimus?</div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Tabs in bootstrap
<!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>Tabs</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Tabs</h3>
<hr>
<ul class="nav nav-tabs">
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-2</a></li>
<li class="active"><a href="#">Menu-3</a></li>
<li><a href="#">Menu-4</a></li>
<li><a href="#">Menu-5</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Dropdown 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>Tabs</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Tabs</h3>
<hr>
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">Insert</a></li>
<li class="dropdown" ><a href="#" class="drop down-toggle" data-toogle="dropdown">Pagelayout<span class="caret"></span></a></li>
<li></li>
<li><a href="#">Reference</a></li>
<li><a href="#">Review</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Pills in bootstrap
<!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>Piils</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Pills</h3>
<hr>
<ul class="nav nav-pills">
<li class="active"><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>
<li><a href="#">menu-5</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Vertical navigation bar
<!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>Piils</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Pills</h3>
<hr>
<ul class="nav nav-pills nav-stacked">
<li class="active"><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>
<li><a href="#">menu-5</a></li>
</ul>
</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