Bootstrap Dropdown
Dropdown aloow you to select a specific value from a list.class .dropdown to create Bootstrap Dropdown.Javascript plugin will made this dropdown interactive.
Code
Example 2 : (dropdown-menu-right,dropup)
Code
Dropdown aloow you to select a specific value from a list.class .dropdown to create Bootstrap Dropdown.Javascript plugin will made this dropdown interactive.
- dropdown : class is use to create dropdown menu
- dropdown-toggle : class is use to open dropdown menu.You have to add data-toggle="dropdown" attribute.
- caret : class create the arrow icon.
- dropdown-menu : class create the list of item and dropdown.
- divider : class separate links inside the dropdown menu with a thin horizontal line.
- dropdown-header : class is add headers inside the dropdown menu.
- disabled : disable a inside the dropdown menu.
- active : class highlight a specific element inside the dropdown menu.
- dropup : class open dropdown menu to expand upwards.
- dropdown-menu-right : class open dropdown menu to right align.
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<link
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div
class="container">
<div
class="dropdown">
<button
class="btn
btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown">
Dropdown
Devider Example <span
class="caret"></span>
</button>
<ul
class="dropdown-menu">
<li
class="dropdown-header">Dropdown
header </li>
<li><a
href="#">INDIA</a></li>
<li><a
href="#">CHINA</a></li>
<li
class="divider"></li>
<li><a
href="#">BRAZIL</a></li>
<li><a
href="#">USA</a></li>
</ul>
</div>
</div>
</body>
</html>
Example 2 : (dropdown-menu-right,dropup)
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<link
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div
class="container">
<h2>
Dropdown
Devider Example</h2>
<div
class="dropup">
<button
class="btn
btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown">
Dropdown
Devider Example <span
class="caret"></span>
</button>
<ul
class="dropdown-menu
dropdown-menu-right">
<li
class="dropdown-header">Dropdown
header </li>
<li><a
href="#">INDIA</a></li>
<li><a
href="#">CHINA</a></li>
<li
class="divider"></li>
<li><a
href="#">BRAZIL</a></li>
<li><a
href="#">USA</a></li>
</ul>
</div>
</div>
</body>
</html>
Output :
Output :
No comments:
Post a Comment