我编写了一个非常简单的Django Web应用程序，该应用程序将URL定向到 View ，然后具有 View 渲染模板。我想在模板中使用Twitter Bootstrap，以使应用程序的前端更可用。 Twitter Bootstrap的CSS似乎运行良好，但JavaScript出现问题。我已经在模板目录中设置了一个名为dropdown.html的测试页，其中包含以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple test of JavaScript dropdown menus in Twitter Bootstrap</title>
<!-- Le styles -->
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Dropdown test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<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>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
这是结果页面的屏幕截图:
我知道CSS和JavaScript文件已交付给浏览器，因为我可以看到Django的日志输出，其中显示了以下内容:
[06/Nov/2012 18:14:30] "GET /dropdown/ HTTP/1.1" 200 1465
[06/Nov/2012 18:14:30] "GET /static/bootstrap/js/bootstrap.js HTTP/1.1" 200 56478
[06/Nov/2012 18:14:30] "GET /static/bootstrap/css/bootstrap.css HTTP/1.1" 200 121663
另外，当我在Firefox中加载页面并使用Firebug“查看源代码”时，我可以看到包含的JavaScript(bootstrap.js的所有2025行)，并且下拉代码正好在我期望的位置(第571行)。
不幸的是，当我单击下拉菜单时，没有任何反应。
最佳答案
一旦包含JQuery，它就开始起作用。我上面的示例中的<head>应该如下所示:
<head>
<meta charset="utf-8">
<title>Simple test of JavaScript dropdown menus in Twitter Bootstrap</title>
<!-- Le styles -->
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script src="{{ STATIC_URL }}jquery/jquery-1.8.2.js"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
</head>