Flask框架——Bootstrap-Flask使用

白巧克力LIN

已于 2022-08-07 22:01:38 修改

阅读量2.9k

点赞数 2

分类专栏： Flask框架文章标签： flask bootstrap python

于 2022-08-06 22:56:39 首次发布

本文链接：https://blog.csdn.net/weixin_52122271/article/details/126202679

版权

Flask框架专栏收录该内容

25 篇文章 24 订阅

订阅专栏

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

白巧克力LIN

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flask框架——Bootstrap-Flask使用

上篇文章我们学习了，这篇文章我们来学习Flask框架——Bootstrap-Flask扩展。对于css，html技术不熟练的人来说，想要快速创建简洁、美观又功能全面的页面是比较难的，这时我们就可以使用Bootstrap-Flask扩展，该扩展能让不熟练css、html的人也能快速的创建简洁、美观又功能全面的页面，让我们在前期不用花费太多的精力和CSS纠缠。............
复制链接

扫一扫