Panel 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>Panel</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</h3>
<hr>
<div class="panel-danger">
<div class="panel-heading">Heading</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat alias vero totam repellendus dolore maxime delectus odio mollitia perspiciatis corporis quisquam possimus error sapiente adipisci, incidunt pariatur perferendis quis vitae?</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:
Dropdown 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>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Dropdown</h3>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
courses
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">c</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
<li class="divider"></li>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">js</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Dropdown in heading
<!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>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Dropdown</h3>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
courses
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Programming Courses</li>
<li><a href="#">c</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
<li class="divider"></li>
<li class="dropdown-header">Web design Courses</li>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">js</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Active&disable dropdown
<!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>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Dropdown</h3>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
courses
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Programming Courses</li>
<li class="active"><a href="#">c</a></li>
<li><a href="#">c++</a></li>
<li class="disabled"><a href="#">java</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Dropdown Alignment
left align
<!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>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Dropdown</h3>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
courses
<span class="caret"></span>
</button>
<ul class="dropdown-menu-right">
<li><a href="#">c</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Top Align
<!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>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Dropdown</h3>
<div class="dropup">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
courses
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">c</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</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