[解決済み] BootstrapのCollapse Navbarが動作しない

質問

ここ数時間試しているのですが、簡単なことがうまくいかないようです。ご存知のように、Bootstrapは画面が小さいときに折りたたみ可能なナビバーを提供します。しかし、この機能は私のために動作していないようです。

以下、該当するコードです。

<div class="navbar navbar-inverse">
        <div class="container">

            <button class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>      
            </button>

            <button class="navbar-toggle pull-right btn-info" data-toggle="collapse" data-target="#navForm">
            Sign In/Sign Up
            </button>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navHeaderCollapse pull-left">
                    <li class="active"><a href="index.php">Home</a></li>
                    <li><a href="about-us.php">About Us</a></li>
                    <li><a href="contact-us.php">Contact Us</a></li>
                    <li><a href="privacy-policy.php">Privacy policy</a></li>
                    <li><a href="sitemap.php">Sitemap</a></li>
                    <li><a href="blog" target="_blank">Blog</a></li>
                </ul>

                <ul class="nav navbar-nav pull-right" id="navForm">
                  <li><a href="/users/sign_up">Sign Up</a></li>
                  <li class="divider-vertical"></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" href="#signin" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                    <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;" id="signin">
                        <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                            <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
                            <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
                            <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                            <label class="string optional" for="user_remember_me"> Remember me</label>
                            <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
                        </form>
                    </div>
                  </li>
                </ul>
            </div>  
        </div>
    </div>

jsfiddleは。 http://jsfiddle.net/n94zL/

更新しました。 Firefox Dev Toolsで以下のエラーが発生します。 エラーです。BootstrapのJavaScriptはjQueryを必要とします。

これは何を意味するのでしょうか？

解決方法は？

ナビバーを動作させるために修正する必要があるいくつかのエラーがあります。

1) Bootstrapの要素/ウィジェットの中には、jQueryライブラリ（実際にはJavaScriptのライブラリです）を使用しているものがあります。したがって、jQueryライブラリをインクルードしてください（ブートストラップはそれを必要とします）。

2) bootstrap.js (または bootstrap.min.js) も必要です。

3) ターゲットとしているのは data-target="#navHeaderCollapse" (注 # )であるからです。 id であって class

jQuery ライブラリについては、以下のサイトからダウンロードすることができます。 こちら または、ライブの .js ファイルにリンクしてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

上記の行は、bootstrap.js を呼び出す前に記述することに注意してください。

動作中のフィドル