title: problems getting JavaScript dropdown to work in Twitter Bootstrap while using Django
body: <p>I have written a very simple Django web app that directs urls to views and then has the views render templates.  I would like to use Twitter Bootstrap in my templates in order to make the front end of my app more usable.  The CSS from Twitter Bootstrap seems to be working fine, but I'm having trouble with the JavaScript.  I have set up a test page in my templates directory called dropdown.html and it contains the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Simple test of JavaScript dropdown menus in Twitter Bootstrap&lt;/title&gt;
  
      &lt;!-- Le styles --&gt;
      &lt;link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;style type="text/css"&gt;
        body {
          padding-top: 60px;
          padding-bottom: 40px;
        }
      &lt;/style&gt;
  
      &lt;script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;a class="brand" href="#"&gt;Dropdown test&lt;/a&gt;
            &lt;div class="nav-collapse collapse"&gt;
              &lt;ul class="nav"&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a screenshot of the resulting page:</p>
  
  <p><img src="https://i.stack.imgur.com/54drF.png" alt="enter image description here"></p>
  
  <p>I know that the CSS and JavaScript files are being delivered to the browser because I can see the log output from Django, which shows the following:</p>
  
  <pre><code>[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
  </code></pre>
  
  <p>Also, when I load the page in Firefox and use Firebug to "view source" I can see the included JavaScript (all 2025 lines of bootstrap.js) and the dropdown code is right where I would expect it to be (line 571).</p>
  
  <p>Unfortunately, when I click on the dropdown menu, however, nothing happens.</p>