我使用 Jinja2 和 Flask-WTF 来制作联系表单作为我网站的一部分，对于输入，我使用 Jinja2 语法。我如何才能设计 Jinja 和 HTML 的样式，使其看起来美观且令观看者满意。目前，如果我尝试为输入添加自己创建的类，它们将无法使用“contact.html”文件中的 jinja2 语法。感谢您的帮助。contact.pyfrom flask_wtf import FlaskFormfrom wtforms import StringField, SubmitFieldclass contactForm(FlaskForm): name = StringField('Name') email = StringField('Email') message = StringField('Message') submit = SubmitField('Send')联系方式.html{% block head %}<link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}">{% endblock %}{% block body %}<br><br><h1><center>Get In Touch With Us!</center></h1><br><br> <form action="" method="POST"> {{form.name.label}} {{form.name(size=40)}} {{form.email.label}} {{form.email(size=60)}} {{form.message.label}} {{form.message()}} {{form.submit()}} </form>{% endblock %}app.py（只是联系部分）@app.route('/contact', methods=['GET', 'POST'])def contact(): form = contactForm() if form.is_submitted(): result = request.form return render_template('sent.html', result=result) return render_template('contact.html', form=form)
1 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
bootstrap 4您可以在 jinja2 代码中使用类。但为此你必须在 html 模板中添加 bootstrap 的 CSS。
我是这样做的：
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
</head>
<body>
<style type="text/css">
body{
font-family: 'Montserrat', sans-serif;
}
</style>
<form action="your route fucntion" method="POST">
{{ form.hidden_tag() }}
{{ form.name.label() }}
{{ form.name(class="form-control pt-4") }}
{{ form.email.label(class="pt-4") }}
{{ form.email(class="form-control pt-4") }}
{{ form.message.label(class="pt-4") }}
{{ form.message(class="form-control pt-4") }}
{{ form.submit(class="btn btn-outline-success ml-1 mt-5") }}
</form>
</div>
<p class="text-info ml-5 pt-4">**All fields are required.</p>
</body>
</html>
- 1 回答
- 0 关注
- 77 浏览
添加回答
举报
0/150
提交
取消