2012-07-03 43 views
3

添加下拉登錄我下面this guide在引導

我添加的代碼的第一個片段,以我現有的導航欄,然後添加第二個片段到那裏說。但是,彈出登錄不會出現。我的代碼有什麼問題?另外,我在哪裏添加第三個代碼片段?

<!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="https://stackoverflow.com/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> 

回答

5

你似乎沒有任何JavaScript包括

您需要包括jQuery和引導,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> 

的代碼第三片段可以在body標籤關閉前編輯(編輯工作)

<script> 
$(document).ready(function() 
{ 
    //Handles menu drop down 
    $('.dropdown-menu').find('form').click(function (e) { 
     e.stopPropagation(); 
     }); 
    }); 
</script> 
+2

並且一定要在引導之前包含jquery或它不起作用。並且如果它修復了您的問題,請將user1489736標記爲正確的答案。 – Theo

+0

準確的代碼行是什麼?對不起,我很小白:|這是我製作的第一個真實網站。 – mrkent

+0

編輯包括 –