3

URL をビューに送信し、ビューにテンプレートをレンダリングさせる非常に単純な Django Web アプリを作成しました。アプリのフロント エンドをより使いやすくするために、テンプレートで 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>

結果のページのスクリーンショットを次に示します。

ここに画像の説明を入力

Django からのログ出力を確認できるので、CSS ファイルと JavaScript ファイルがブラウザーに配信されていることがわかります。次のように表示されます。

[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 行目) にあります。

残念ながら、ドロップダウン メニューをクリックしても何も起こりません。

4

1 に答える 1

3

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>
于 2012-11-07T00:47:35.577 に答える