目录
上篇文章我们学习了Flask框架——应用错误处理，这篇文章我们来学习Flask框架——Bootstrap-Flask扩展。
对于css，html技术不熟练的人来说，想要快速创建简洁、美观又功能全面的页面是比较难的，这时我们就可以使用Bootstrap-Flask扩展，该扩展能让不熟练css、html的人也能快速的创建简洁、美观又功能全面的页面，让我们在前期不用花费太多的精力和CSS纠缠。
Bootstrap-Flask
Bootstrap-Flask是一个简化在Flask项目中集成前端开源框架Bootstrap过程的Flask扩展。使用Bootstrap可以快速的创建简洁、美观又功能全面的页面。
Bootstrap-Flask是为了替代不够灵活且缺乏维护的Flask-Bootstrap。它的主要设计参考了Flask-Bootstrap，其中渲染表单和分页部件的宏基于Flask-Bootstrap中的相关代码修改实现。
例如：我们可以使用Bootstrap中文网中的Bootstrap3中文文档的组件/Bootstrap4中文文档的组件快速生成简洁、美观又功能全面的页面，例如我们使用Bootstrap4组件的轮播图，如下图所示：
只需要把该代码复制到模板文件即可。
安装
安装方式如下：
pip install bootstrap-flask
注意：在同一个Flask项目中，不能同时存在Flask-Bootstrap和Bootstrap-Flask，当我们项目已经有了Flask-Bootstrap的话，需要卸载Flask-Bootstrap才能安装Bootstrap-Flask。
初始化
在Flask程序中初始化Bootstrap4如下所示：
from flask import Flask
from flask_bootstrap import Bootstrap4
app = Flask(__name__)
bootstrap = Bootstrap4(app) #使用Bootstrap4
if __name__ == '__main__':
app.run()
当我们使用工厂函数时，可以使用如下初始化扩展。
from flask_bootstrap import Bootstrap4
from flask import Flask
bootstrap = Bootstrap4() #使用Bootstrap4
def create_app():
app = Flask(__name__)
bootstrap.init_app(app) #初始化bootstrap
return app
注意：因为flask-bootstrap不支持Bootstrap4，当我们安装的是flask-bootstrap时，需要把Bootstrap4改为Bootstrap。
创建父模板
首先我们在Flask项目中的templates文件夹中创建一个名为mybase.html父模板文件。创建父模板Flask-Bootstrap和Bootstrap-Flask的区别：
Flask-Bootstrap
Flask-Bootstrap包含内置的基本模板，所以我们的父模板需要继承bootstrap中的base.html模板才能渲染bootstrap中的组件，创建mybase.html父模板内容如下：
{# 继承bootstrap中的base.html #}
{% extends "bootstrap/base.html" %}
{# 块修改标题 #}
{% block title %}This is an example page{% endblock %}
{# 块导航栏 #}
{% block navbar %}
{% endblock %}
{# 块内容 #}
{% block content %}
{% endblock %}
在子模板中，我们编写的HTML文件内容都是父模板的基于块（block）的，例如：上面的title、navbar、content，除了这些，还有：
{# css块 #}
{% block styles %}
{{super()}}
{% endblock %}
{# JavaScript块 #}
{% block scripts %}
{{super()}}
{% endblock %}
这样我们就可以使用bootstrap中的插件快速生成页面。
注意：
-
Flask-Bootstrap不支持Bootstrap4，所以在使用Flask-Bootstrap只能使用Bootstrap3中文文档的组件；
-
在子模板中使用这些块时，可以编写super()函数用来继承父模板的块。
Bootstrap-Flask
出于灵活性的原因，Bootstrap-Flask不包含内置的基本模板，所以不能使用bootstrap中的base.html模板，需要我们自己创建全新的父模板。
Bootstrap-Flask提供了两个辅助函数来加载模板中的Bootstrap资源：bootstrap.load_css()和bootstrap.load_js().
创建父模板示例代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
{# 块标题 #}
<title>{% block mytitle %}
首页
{% endblock %}</title>
{#块样式，使用bootstrap.load_css()加载bootstrap的css资源#}
{% block mystyle %}{{ bootstrap.load_css() }}{% endblock %}
</head>
<body>
{#块导航栏#}
{% block navbar %}
{% endblock %}
{#块内容#}
{% block concent %}
{% endblock %}
{#块JavaScript ，使用bootstrap.load_js()加载bootstrap的JavaScript资源#}
{% block scripts %}{{ bootstrap.load_js() }}{% endblock %}
{#块底部内容#}
{% block footer %}
{% endblock %}
</body>
</html>
这里我们为父模板mybase.html文件添加了标题、导航栏、内容、底部内容，并使用了bootstrap.load_css()和bootstrap.load_js()加载bootstrap的资源。
这样我们就可以使用bootstrap4中文文档中的组件了，这里我们选择了导航栏的组件，如下图所示：
我们把图中的代码复制在父模板mybase.html中的块导航栏，在上面的Flask程序中添加渲染mybase.html的视图函数，代码如下所示：
@app.route('/')
def index():
return render_template('mybase.html')
启动Flask程序，访问http://127.0.0.1:5000/，如下图所示：
这样我们就成功快速地创建简洁美观的导航栏，大家可以根据需要添加bootstrap4里面的组件。
快速渲染宏
目前，Bootstrap-Flask一共提供了12个宏，分别用来快捷渲染各类Bootstrap页面组件，并提供了对扩展Flask-WTF、Flask-SQLAlchemy的支持。
| 宏 | 模板路径 | 描述 |
|---|---|---|
| render_field() | bootstrap4/form.html | 渲染一个 WTForms 表单域 |
| render_form() | bootstrap4/form.html | 呈现一个 WTForms 表单 |
| render_form_row() | bootstrap4/form.html | 渲染一行网格表格 |
| render_hidden_errors() | bootstrap4/form.html | 为隐藏的表单字段呈现错误消息 |
| render_pager() | bootstrap4/pagination.html | 渲染一个基本的 Flask-SQLAlchemy pagniantion |
| render_pagination() | bootstrap4/pagination.html | 呈现标准的 Flask-SQLAlchemy 分页 |
| render_nav_item() | bootstrap4/nav.html | 渲染导航项 |
| render_breadcrumb_item() | bootstrap4/nav.html | 渲染项目 |
| render_static() | bootstrap4/utils.html | 呈现资源参考代码（即<link>, <script>） |
| render_messages() | bootstrap4/utils.html | 渲染由 flash() 函数发送的闪烁消息 |
| render_icon() | bootstrap4/utils.html | 渲染 Bootstrap 图标 |
| render_table() | bootstrap4/table.html | 使用给定数据渲染表格 |
使用方法相当简单，以渲染Flask-WTF（WTForms）的表单类的render_form()宏为例，我们只需要从对应的模板路径导入宏，然后调用即可并传入必要的参数，示例代码如下所示：
{% from 'bootstrap4/form.html' import render_form %}
{{ render_form(form) }}
好了，关于Flask框架——Bootstrap-Flask使用就讲到这里了，感谢观看，下篇文章学习Flask框架——MongoEngine使用MongoDB。
公众号：白巧克力LIN
该公众号发布Python、数据库、Linux、Flask、自动化测试、Git等相关文章！
- END -