http://www.bootply.com/SeRZCS7L09

Question

我正在尝试找到一个看起来像这样的登录模块 Login Screen

我已经尝试过寻找允许这样做的引导程序模板，但我找不到任何可用的模板。我想知道这里是否有人知道任何引导模板：

具有徽标的响应式登录对话框
使背景变暗

对此已经疯了。任何帮助将不胜感激。：）

Answer 1

基本上你可以用类来做一个模态框：modal，hide。如果需要，可以在三个不同的部分拆分模态框内容：标题，正文和页脚。

<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

Answer 2

如果您愿意，可以使用任何JS，但您可以采用模态方法。这是另一个建议。

这是类似解决方案的Bootly

http://www.bootply.com/SeRZCS7L09

你可以使用twitter bootstrap 3。因为您可以在自己的CSS中指定宽度，然后使用网格系统来提供其余的。看看开始部分o bootstrap 3。

如果我打算这样做，我会做以下事情：

HTML跳过了标签等一个简短的例子

<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>

链接我的Bootstrap以获得表单控件的好处

然后在我的CSS表格中：

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

这是非常基本的，但我觉得没有必要重复，因为您将能够查看引导文档，它会向您展示如何使用网格/列/行等使用这些可以使用这些轻松创造那种外观！我把它用于很多项目。

Bootstrap 3

黑暗的背景可以通过黑色背景可能达到半透明度或更低的div来实现，你可以通过转换或JS来显示它。 CSS3 Opacity

Bootstrap 3 - 响应式登录对话框

2 个答案:

http://www.bootply.com/SeRZCS7L09