Flask框架——Bootstrap-Flask使用

上篇文章我们学习了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().

创建父模板示例代码如下：


html>
<html lang="en">
<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	呈现资源参考代码（即,