如何将flask_wtf表单合并到Bootstrap表单中？

Question

我正在尝试创建一个简单的登录/退出网站，但我不知道如何有效地将 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 形式：

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember_me = BooleanField('Remeber Me')
    submit = SubmitField('Sign In')

我不明白如何在 Bootstrap 代码中使用 Flask 风格的占位符。

注意：我不知道为什么 HTML 大部分是橙色的；如果有人可以更改它，使其看起来更清晰，那就太好了。

Answer 1

这应该有效：

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