我試圖找出一個登錄模塊，看起來像這樣 Login Screen 引導3 - 響應登錄對話框

我試圖尋找引導模板，允許這一點，但我無法找到任何可用。我不知道是否有人在這裏知道是否有任何引導模板：

響應登錄對話框瓦特/標誌
調暗背景

已經要瘋了這一點。任何幫助將不勝感激。 :)

2014-12-23 Chrisette Angeline

基本上，你可以做一個模態框與類：模態，隱藏。如果需要，可以在三個不同部分分割模態框內容：標題，正文和頁腳。

<div class="modal hide" id="myModal"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">x</button> 
     <h3>Login to MyWebsite.com</h3> 
     </div> 
     <div class="modal-body"> 
     <form method="post" action='' name="login_form"> 
      <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p> 
      <p><input type="password" class="span3" name="passwd" placeholder="Password"></p> 
      <p><button type="submit" class="btn btn-primary">Sign in</button> 
      <a href="#">Forgot Password?</a> 
      </p> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     New To MyWebsite.com? 
     <a href="#" class="btn btn-primary">Register</a> 
     </div> 
    </div>

詳情你可以檢查出： Login form in modal

來源

2014-12-23 15:45:41 tblancog

更新了我的回答@caramba – tblancog

大約有使用任何JS，如果你希望雖然你可以拿模態的方式方法。這是另一個建議。

這裏是一個類似的解決方案

SeRZCS7L09

可以使用Twitter的引導3本的Bootly。因爲你可以在你自己的CSS中指定寬度，然後使用網格系統來提供剩餘的寬度。看看通過上手科o引導3.

，如果我打算做這個，我將做到以下幾點：

HTML跳過標籤等juut一個簡單的例子

<body> 
    <div id="login-form"> 
     <h2>Login</h2> 
     <input type="text" class="form-control" name="password/> 
     <input type="text" class="form-control" name="username/> 
    </div> 
</body>

鏈接我的引導來獲得表單控制的優點

然後在我的CSS表：

#login-form{ 
    width: 400px; 
    margin:0 auto; 
    //etc etc etc 
}

這是非常基本的，但我覺得沒有必要重複，因爲您可以查看bootstrap文檔，並深入顯示如何使用網格/列/行等，使用這些可以很容易創建那個外觀！我用它來做很多項目。

Bootstrap 3

黑暗的背景可以用黑色背景與可能不透明的一半或更少的DIV來實現，你會作出過渡通過JS或本出現。 CSS3 Opacity

來源

2014-12-23 15:47:22 Kieranmv95

引導3 - 響應登錄對話框

回答

http://www.bootply.com/SeRZCS7L09

相關問題