一. flask中bootstrap的使用

        16- flask-bootstrap模板的使用_一个微不足道的bug的博客-CSDN博客

        

二. form结合bootstrap使用

        (1). form.py 进行表单验证

from flask_wtf import FlaskForm
from flask_wtf.file import FileField, FileRequired, FileAllowed
from wtforms import StringField
from wtforms.validators import DataRequired, Length, ValidationErrorclass UserForm(FlaskForm):# StringField:text文本框  ;DataRequired():必填 ;Length():长度; EqualTo():和谁保持一致name = StringField(label='用户名', validators=[DataRequired(), Length(min=6, max=12, message="用户名长度必须在6~12位之间")])# FileField:文件上传类型 ;FileRequired:必填;FileAllowed:允许的类型icon = FileField(label="用户头像", validators=[FileRequired(), FileAllowed(['jpg', 'png', 'gif'], message="必须是图片文件格式")])# 定义钩子方法,对用户名增加校验:validate_字段名def validate_name(self, data):if self.name.data[0].isdigit():raise ValidationError("用户名不能以数字开头")

    (2). 视图函数调用表单对象,传递给前端

from io import BytesIOfrom flask import Blueprint, session, make_response, render_templatefrom util.form import UserFormuser_bp = Blueprint('user', __name__)@user_bp.route('/', methods=["GET", "POST"])
def boot_form_user():uform = UserForm()return render_template("user/index.html", uform=uform)

(3). 前端结合bootstrap使用表单对象生成页面

{% extends 'bootstrap/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}{% block style %}{{ super() }}
{% endblock %}{% block content %}{#快速的全拿过来#}
{# {{ wtf.quick_form(uform) }}#}{#一个个拿#}
{{ wtf.form_field(uform.name) }}{% endblock %}