<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>bootstrap Experience Example: drop-down menu use of plug-in methods </title>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
<body>
<div style= "padding:20px" >
<nav class= "NavBar navbar-default" role= "Navigation" >
<div class= "Navbar-header" >
<a href= "#" class= "Navbar-brand" >w3cSchool</a>
</div>
<div id= "Myexample" >
<ul class= "Nav navbar-nav" >
<li class= "Active" ><a href= "#" >Html5</a></li>
<li><a href= "#" >Css3</a></li>
<li><a href= "#" >Javascript</a></li>
<li><a href= "#" >jQuery</a></li>
<li><a href= "#" >jQueryUI</a></li>
<li><a href= "#" >Bootstrap</a></li>
<li><a href= "#" >AngularJS</a></li>
<li><a href= "#" >C#.Net</a></li>
<li><a href= "#" >MsSql</a></li>
<li class= "Dropdown" >
<a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" >HTML5 front <span class= "caret" ></span> </a>
<ul class= "Dropdown-menu" role= "Menu" >
<li><a href= "#" >Html5</a></li>
<li><a href= "#" >Css3</a></li>
<li><a href= "#" >Javascript</a></li>
<li><a href= "#" >jQuery</a></li>
<li><a href= "#" >jQueryUI</a></li>
<li><a href= "#" >Bootstrap</a></li>
<li><a href= "#" >AngularJS</a></li>
<li><a href= "#" >C#.Net</a></li>
<li><a href= "#" >MsSql</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<script>
$ (document). Ready (function () {
$ (". Dropdown-toggle"). Dropdown ("toggle");
})
</script>
</body>
Bootstrap Experience Example: the use of drop-down menu plugin method