我正在尝试创建一个简单的登录/退出网站,但我不知道如何有效地将 Bootstrap 与 Flask 结合使用。我才刚刚开始使用 Bootstrap,所以我对它的工作原理和一般的 Web 开发还很陌生。
下面是我使用的
flask_wtf
表格:
<h1>Sign In</h1>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p>
{{ form.username.label }}<br>
{{ form.username(size=32) }}
</p>
<p>
{{ form.password.label }}<br>
{{ form.password(size=32) }}
</p>
<p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
<p>{{ form.submit() }}</p>
</form>
class LoginForm(FlaskForm):
username = StringField('Username', validators=[DataRequired()])
password = PasswordField('Password', validators=[DataRequired()])
remember_me = BooleanField('Remeber Me')
submit = SubmitField('Sign In')
还有一个基本的 Bootstrap 形式:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
我不明白如何在 Bootstrap 代码中使用 Flask 风格的占位符。
注意:我不知道为什么HTML大部分是橙色的;如果有人可以改变它,让它看起来更清晰,那就太好了。
这应该有效:
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.username.label }}
{{ form.username(class_="form-control", size=32) }}
</div>
<div class="form-group">
{{ form.password.label }}
{{ form.password(class_="form-control", size=32) }}
</div>
<div class="form-group form-check">
{{ form.remember_me(class_="form-control") }} {{ form.remember_me.label }}
</div>
{{ form.submit(class_="form-control") }}
</form>
如果一个条目不是一个输入,而是一个下拉菜单怎么办?