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().

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

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    {#  块标题  #}
    <title>{% block mytitle %}
    {% endblock %}</title>
    {#块样式，使用bootstrap.load_css()加载bootstrap的css资源#}
    {% block mystyle %}{{ bootstrap.load_css() }}{% endblock %}
</head>
{#块导航栏#}
{% block navbar %}
{% endblock %}
{#块内容#}
{% block concent %}
{% endblock %}
{#块JavaScript ，使用bootstrap.load_js()加载bootstrap的JavaScript资源#}
{% block scripts %}{{ bootstrap.load_js() }}{% endblock %}
{#块底部内容#}
{% block footer %}
{% endblock %}