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>
bootstrap.min.js
file isn't using a period and not a dash? I'm looking at the source right now, and its using a period.