我刚开始使用Bootstrap 3进行编码，我一直在开发下面的主页，但是导航栏中的Dropdown菜单和主页上的模态已停止工作。
我的另一个页面也有一个可以正常工作的模态，所以我不确定它的区别是什么。
有人可以帮忙吗？
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spark Media Arts</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Spark Media Arts</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">PORTFOLIO<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Graphic Design</a></li>
<li class="divider"></li>
<li><a href="#">Video Production</a></li>
</ul></li>
<li><a href="#contact" data-toggle="modal">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Spark Media Arts</h1>
<p>"Inspiring Creativity through Media ..."</p>
<a href="#book_workshop" class="btn btn-primary" data-toggle="modal" role="button">Book A Workshop</a>
<a href="#hire_us" class="btn btn-success" data-toggle="modal" role="button">How To Hire Us</a>
</div>
<div class="row">
<div class="col-sm-4">
<a href="gdshowreel.html" class="thumbnail home-thumb"><img src="img/thumbs/gdshow.jpg" alt="Graphic Design Showreel"></a>
<h3>Graphic Design Showreel</h3>
<p>Year of production: 2014<br>
Running Time: 1:35 min<br>
Produced for: Spark Media Arts<br>
<br>Over the course of our first year, we've had the opportunity to produce artwork for various and some of their work and events.</p>
<a href="gdshowreel.html" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail home-thumb"><img src="img/thumbs/vpshow.jpg" alt="Video Production Showreel"></a>
<h3>Video Production Showreel</h3>
<p>Year of production: 2014<br>
Running Time: 3:09 min<br>
Produced for: Spark Media Arts<br>
<br>Over the course of our first year, we've had the opportunity to produce videos for various and some of their work and events.</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail home-thumb"><img src="img/thumbs/sppromo.jpg" alt="SP Project Promo 2014"></a>
<h3>SP Project Promo 2014</h3>
<p>Year of production: 2014<br>
Running Time: 2:37 min<br>
Produced for: SP Project<br>
<br>Promotional Video for SP Project, an organisation working across the North East region in the UK.</p>
<a href="#" class="btn btn-danger" data-toggle="modal">Read More</a>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2014 Spark Media Arts.</p>
</div>
<div class="navbar-text pull-right">
<p>Get in touch:
<a href="mailto:sparkmediaarts@gmail.com" target="_blank"><img src="img/social_icons/email.png"></a>
<a href="https://www.facebook.com/sparkmediaarts" target="_blank"><img src="img/social_icons/facebook.png"></a>
<a href="https://plus.google.com/u/0/b/106211922046524978613/106211922046524978613" target="_blank"><img src="img/social_icons/google-plus.png"></a>
<a href="https://www.twitter.com/sparkmediaarts" target="_blank"><img src="img/social_icons/twitter.png"></a>
<a href="https://www.vimeo.com/sparkmediaarts" target="_blank"><img src="img/social_icons/vimeo.png"></a>
<a href="http://www.youtube.com/sparkmediaarts" target="_blank"><img src="img/social_icons/youtube.png"></a>
</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form">
<div class="modal-header">
<h4>Contact</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact-name" placeholder="First and Last Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact-email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4">
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="book_workshop" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Book A Workshop</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>