3

私はブートストラップの最初の一歩を踏み出しています。基本的に、テンプレートの 1 つを自分で再作成しました。（ナビゲーションバーの）ドロップダウンメニューが機能しないことを除いて、正常に機能します。

私は困惑しています：

1) モバイルモードへの移行は正常に機能します。ナビメニューも正常に動作します。

2) 取得したすべてのファイルをダウンロードに含めましたが、ファイルが含まれていないかのように動作すると思います。

3) 何か間違っていると思ったので、HTML のこの部分を Web サイトから直接コピーしましたが、まだ機能しません。

これはソースコード全体です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
       <link href="css/bootstrap.css" rel="stylesheet">
       <link href="css/bootstrap.min.css" rel="stylesheet">     
      <script src="../assets/js/html5shiv.js"></script>     

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

     <div class="navbar navbar-fixed-top asd">
      <div class="navbar-inner asd">
        <div class="container asd">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav asd">
              <li ><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="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Title</h1>
      <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>  

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
4

2 に答える 2

2

ファイルに bootstrap-dropdown.js を含める必要があります: http://twitter.github.io/bootstrap/components.html#dropdowns

これをスクリプトの一番下に追加します (jquery を含めた後):

 <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>

編集：重要

問題は、bootstrap.js と bootstrap.min.js の両方を含めていることです。同様の問題がここで発生しました (最初に見つけた場所です): Bootstrap.min.js と bootstrap-dropdown.js を同時に使用できません

于 2013-07-22T17:26:51.510 に答える
1

重複したlinkと行を削除した後 ( と のようにscript、通常のファイルと最小化されたファイルの両方をインポートする必要はありません)、ファイルをテストしましたが、エラーは見つかりませんでした。js/bootstrap.jsjs/bootstrap.min.js

何かが不足しているため (おそらくbootstrap.js)、すべてのパスを確認することをお勧めします: Chrome コンソールまたは FireBug を使用して、環境にロードされていないリソースを確認し、/js/bootstrap.min.js可能な場合は常に相対パスを絶対パス (など)に変換してみてください。一般的なファイル インポートの落とし穴を回避します。

PS: カスタマイズされたバージョンではなく、完全な最新の安定バージョンの Bootstrap をお持ちだと思います。

于 2013-07-22T17:47:13.493 に答える