I'm trying to get to grips with bootstrap and having little success. I am just trying to get a local version of this template working
http://getbootstrap.com/examples/jumbotron/
I have copied the html directly into a html page and referenced the css and js files in the same order as the webpage only using copies from the latest download on my machine. However nothing happens when the arrow next to dropdown is clicked (i.e. no menu appears)
I have tried to reproduce the code in a jsfiddle but that is even worse and doesnt display the menu properly at all. http://jsfiddle.net/andieje/kRX6n/
Here is my page's output. I also included the dropdown js too
<!DOCTYPE html>
<html>
<head><title>
Untitled Page
</title><link href="styles/bootstrap.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="JavaScript/html5shiv.js"></script>
<script src="JavaScript/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-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>
<a class="navbar-brand" href="#">Project name</a>
</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>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<script type="text/javascript" src="JavaScript/jquery.js" />
<script type="text/javascript" src="JavaScript/bootstrap-min.js" />
<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" />
</body>
</html>
I also tried adding this code but to no avail
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
This question is related to
twitter-bootstrap
i faced the same problem , the solution worked for me , hope it will work for you too.
<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Please include the "jquery.min.js" file before "bootstrap.min.js" file, if you shuffle the order it will not work.
Just add both these files after opening of body tag. Keep in mind 'Only after Body tag' any where after body tag. If you add below mentioned files inside body tag then your problems would still be unresolved.
So paste them after or before close of body tag... This works 100%. I've tested and got it working!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I had the same issue I remove the following script and it worked for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Just Remove the type="text/javascript"
<script src="JavaScript/jquery.js" />
<script src="JavaScript/bootstrap-min.js" />
Here is the update - http://jsfiddle.net/andieje/kRX6n/
Adding this script to my code fixed the dropdown menu.
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Source: Stackoverflow.com