我使用 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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
? ? <link 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 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消