我试图找出一个登录模块，看起来像这样 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

相关问题