3

私はこのガイドに従っています

コードの最初のスニペットを既存のナビゲーションバーに追加してから、2番目のスニペットをと表示されている場所に追加しました。ただし、ポップアップログインは表示されません。私のコードの何が問題になっていますか？さらに、コードの3番目のスニペットはどこに追加しますか？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SiteTitle</title>
    <meta name"viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" 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>

</head>

<body>
<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a 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>
          </a>
          <a class="brand" href="#">My Site</a>

        <!-- The drop down menu -->
        <ul class="nav pull-right">
          <li><a href="/users/sign_up">Sign Up</a></li>
          <li class="divider-vertical"></li>
          <li class="drop down">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                          <!-- Login form here -->
              <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 class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#calender">Calender</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Bootstrap starter template</h1>
      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

    </div> <!-- /container -->

</body>
</html>
4

1 に答える 1

5

JavaScriptが含まれていないようです

jqueryとbootstrap-dropdown.jsを含める必要があります（含めるように編集されています:)

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

コードの3番目のスニペットは、bodyタグが閉じられる前に移動できます（機能するように編集されています）

<script>
$(document).ready(function()
{
  //Handles menu drop down
  $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
        });
  });
</script>
于 2012-07-03T02:17:23.107 に答える