2013-12-21 33 views
1

我使用引導程序開發導航欄,並且在該導航欄上有兩個用於登錄和其他註冊的按鈕。我希望當用戶點擊登錄時彈出一個模式彈出窗口,當點擊註冊時,用戶將被重定向到另一個頁面。下面是我的代碼,但在我看來,它不工作。我嘗試使用錨標記並將類設置爲btn btn-primary,但隨後該按鈕變得非常大並且btn-sm類對大小沒有影響。數據切換和數據目標在引導程序中不起作用

<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="navbar-btn"><button id="loginbutton" type="button" class="btn btn-primary" data-target=".modal"><i class="glyphicon glyphicon-log-in"></i>Login</button></li> 
     <li class=" navbar-btn"><button type="button" class="btn btn-success"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button></li> 
    </ul> 
</div> 
<!-- Modal --> 
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3>Login</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal" role="form" action="login" method="post"> 
      <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
       <div class="col-sm-10"> 
        <input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
       <div class="col-sm-10"> 
        <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10 pull-right"> 
        <button type="submit" class="btn btn-default">Sign in</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

回答

3

我定你的代碼:JSFiddle

你忘記了像data-toggle="modal"部分或者兩個div我加入<div class="modal-dialog"><div class="modal-content"></div></div>

順便說一句,如果你想在一個導航欄按鈕也爲一類:有關類的信息

<button type="button" class="btn btn-default navbar-btn">Sign in</button> 
+0

感謝名單好友,並感謝名單 – user3108790

相關問題