Bootstrap
Dropdown menus are toggle-able relative menus for showing links in a list format
and organized manners. These drop-down menus are made collaborative by
installing the drop-down JavaScript plugin in your document. These drop-down
menus can be used by wrapping the class .drop-down. These drop-downs are used for
displaying links in a list format,.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<header class="jumbotron text-center">
<h2>Welcome Nirajanghimirey's Workshop</h2>
<p>Example of Drop Down</p>
</header>
<div class="well">
<div class="dropdown">
<button type="button" class="btn btn-info" id="dropdownMenu1"
data-toggle="dropdown">
Subjects
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://nirajanghimireyworkshop.blogspot.com/search/label/php">php</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/bootstrap ">Bootstrap </a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/webdevelopment">
web development
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/php ">html and php</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href=" http://nirajanghimireyworkshop.blogspot.com/search/label/bootstrap ">css and design</a>
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html> 
No comments:
Post a Comment