我用的是bootstrap3。我想使登录表单更小,并在输入之间更改大小,因为现在它们太近了。
这是我的密码
<div class="container">
<div class="row">
<div class="span2 well col-lg-5">
<legend>Please Sign In</legend>
<!--<div class="alert alert-danger alert-dismissable">
<span class="glyphicon glyphicon-warning-sign"></span>
<button type="button" class="close" data-dismiss="alert">×</button>
Incorrect Username or Password!
</div>-->
<form method="POST" action="" accept-charset="UTF-8">
<div class="input-group input-group-sm">
<span class="glyphicon glyphicon-user input-group-addon"></span>
<input type="text" id="username" class="form-control input-medium" name="username" placeholder="Username" value="${userName}">
</div>
<div class="input-group input-group-sm">
<span class="glyphicon glyphicon-lock input-group-addon"></span>
<input type="password" id="password" class="form-control" name="password" placeholder="Password" value="${pass}">
</div>
<label class="checkbox">
<input type="checkbox" name="remember" value="1"> Remember Me
</label>
<button type="submit" name="submit" class="btn btn-info btn-block">Sign in</button>
</form>
</div>
</div>
</div>
怎么做呢?
形式
使用网格系统,你可以让它们变小变大。见下文。对于它们之间的空格Twitter引导-在行之间添加顶部空格。玩得开心!
<div class="container">
<form class="form-signin" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<h2 class="form-signin-heading">Please sign in</h2>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<label for="id_login" name="login" class="sr-only">Username</label>
<input id="id_login" class="form-control" placeholder="Username" required autofocus>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<label for="id_password" class="sr-only">Password</label>
<input type="password" id="id_password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
</div>
</form>
</div>
如果你想约束整个表单,你可以设置一些类似的CSS规则,这也可以让你在屏幕上移动表单的位置,或者在整个表单(或部分表单:即顶部/底部)周围添加填充。
您可以使用这样的规则来更改字段#loginForm之间的边距。输入组
。
.formCenter {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.formCenter.formChange {
min-width: 300px;
max-width: 500px;
padding: 50px;
}
#loginForm .input-group {
margin: 20px 0;
}
@media (max-width : 768px) {
.formCenter.formChange {
width: 100%;
}
}
下面是一个工作示例:
.formCenter {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.formCenter.formChange {
min-width: 300px;
max-width: 500px;
padding: 50px;
}
#loginForm .input-group {
margin: 20px 0;
}
@media (max-width: 768px) {
.formCenter.formChange {
width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="formCenter formChange">
<div class="col-sm-12 col-md-10 col-md-offset-1 well">
<legend>Please Sign In</legend>
<form method="POST" action="" accept-charset="UTF-8" id="loginForm">
<div class="form-group input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" name='username' id="username" placeholder="Username" />
</div>
<div class="form-group input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" type="password" id="password" name='password' placeholder="Password" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" value="1">Remember Me</label>
</div>
<div class="form-group">
<button type="button" class="btn btn-info btn-block">Sign In</button>
</div>
</form>
</div>
</div>
</div>
</div>
我有一个Rails4应用程序,带有引导程序和简单的表单。 我以简单的形式遵循了示例应用程序--但我的格式没有一个是以与示例中类似的风格出现的(尽管使用了相同的代码)。
问题内容: 这可能是一个愚蠢的问题,但可能会为联接在内部的工作方式提供一些启示。 假设我有一个大表和一个小表(100K行vs. 100行)。 以下两个选项在速度方面是否会有任何差异? 注意,唯一的区别是表的连接顺序。 我意识到不同的SQL语言之间的性能可能会有所不同。如果是这样,MySQL与Access相比如何? 问题答案: 不,顺序无关紧要。 几乎所有的RDBMS(例如MS Access,MyS
在CS231n关于卷积神经网络的课程中,在ConvNet中注: > INPUT[32x32x3]将保存图像的原始像素值,在这种情况下是宽32、高32和具有三个颜色通道R、G、B的图像。 CONV层将计算连接到输入中局部区域的神经元的输出,每个神经元在其权重和输入卷中连接到的小区域之间计算一个点积。如果我们决定使用12个过滤器,这可能会导致体积,例如[32x32x12]。 从文档中,我了解到INPU
问题内容: 在一个教程中,我读到和之间有区别。我发现它们改变了Python 3.0中这些函数的行为。什么是新行为? 以及为什么在python控制台解释器中 发送错误,但是如果我将其放在file.py中并运行它,不是吗? 问题答案: 在python 2.x中,返回一个字符串并在调用它的执行上下文中评估输入 在python 3.x中,已被废弃,该函数以前称为now 。因此,您必须手动调用,而不是想要旧
我想写这个网站的登录功能: 这是我的代码: 我把无头:假,所以我可以看到是怎么回事,但输入值不填写和登录按钮没有点击,任何帮助?
问题内容: 我有一个相当简单的登录表单,该表单随jQuery AJAX请求一起提交。当前,提交表单的唯一方法是按下“登录”按钮,但是我希望能够在用户按下“ Enter”时提交表单。 我只使用jQuery AJAX请求完成表单提交,但是我不确定要在用户按下“ Enter”键时提交表单也需要进行哪些修改。 HTML: JavaScript: 摘录自login.php: 问题答案: 在表单中添加一个ID