Dropdowns Menus Toggleable और Contextual Menus एक List के प्रारूप मे Links को प्रदर्शित करने के लिए उपयोग किया जाता है.
यह Users को एक Predefined List से एक Value को चुनने की सुविधा प्रदान करता है. आप इसको Dropdown JavaScript Plugin के साथ और Interactive बना सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Dropdowns Menu Example</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.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Development
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">HTML</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">HTML5</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
JAVA
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">PHP</a>
</li>
</ul>
</div>
</body>
</html>
Button Group के अंदर Dropdown Menus को बनाने के लिए .btn-group को एक अन्य .btn-group के भीतर Dropdowns Markup के साथ रखते है.
<!DOCTYPE html>
<html>
<head>
<title>Dropdowns Inside Button Groups Example</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/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style type="text/css">
.bt-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bt-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Another Button</button>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary
dropdown-toggle">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>