I don't really understand, when I launch my html page on local the dropdown menu doesn't work.
I tried to copy/paste my html code on bootply and its work! Incredible ...
Any idea ?
I don't want to include all js file, just necessary file for dropdown (dropdown.js)
I didn't really know what I should try ...
If any one can help me It will really appreciate it.
Thank you
You have to include jQuery 1.X or 2.X when you put this in your own HTML page (Bootstrap versions before 3.3.7 are not compatible with JQuery 3.X). Make sure to include jquery.js before bootstrap.js (or dropdown.js). Usually you do this just before the </body> tag.
This is a complete working example, Bootstrap and jQuery are loaded from external CDNs:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- include javascript, jQuery FIRST -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Put this in a .html file and open it in your browser.
The way i got it working First
npm install --save bootstrap@3
this will create all bootsrap dirs for css and js
then i added globally in my project /projectname/angular.json
Added these lines to add css and js
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/npm.js"
]
make sure your index.html file does not directly import any conflicting .js files
at least for me, all of the above did not fix the problem. an upgrade to v3.2.0 of bootstrap did the trick. here is a self-containing sample code. simply copy-paste to a test html file and it should work (all js and css are cdn-loaded):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="btn-group">
<button id="myid" type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>