使用Bootstrap-Flask在Flask项目中集成Bootstrap

20条回复

Bootstrap-Flask是一个简化在Flask项目中集成前端开源框架Bootstrap过程的Flask扩展。使用Bootstrap可以快速的创建简洁、美观又功能全面的页面，而Bootstrap-Flask让这一过程更加简单和高效。尤其重要的是，Bootstrap-Flask支持最新版本的Bootstrap 4版本。

Bootstrap-Flask logo

Bootstrap-Flask logo

GitHub项目主页：https://github.com/greyli/bootstrap-flask

和Flask-Bootstrap的区别

简单来说，Bootstrap-Flask的出现是为了替代不够灵活且缺乏维护的Flask-Bootstrap。它的主要设计参考了Flask-Bootstrap，其中渲染表单和分页部件的宏基于Flask-Bootstrap中的相关代码修改实现。和Flask-Bootstrap相比，前者有下面这些优点：

  • 去掉了内置的基模板，换来更大的灵活性，提供了资源引用代码生成函数
  • 支持Bootstrap 4
  • 标准化的Jinja2语法
  • 提供了更多方便的宏，比如简单的分页导航部件、导航链接等
  • 宏的功能更加丰富，比如分页导航支持传入URL片段
  • 统一的宏命名，即“render_*”，更符合直觉

安装与初始化

你如果使用过Flask-Bootstrap，那么除了安装时的名称外，这个过程基本没有不同。

安装： 

$ pip install bootstrap-flask

初始化： 

from flask_bootstrap import Bootstrap
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap(app)

如果你使用工厂函数创建程序实例，那么可以使用下面的方式初始化扩展： 

from flask_bootstrap import Bootstrap
from flask import Flask

bootstrap = Bootstrap()

def create_app():
    app = Flask(__name__)
    bootstrap.init_app(app)
    
    return app

Bootstrap-Flask提供了哪些功能

2个资源加载函数

在简单的示例程序中，或是在开发时，你可以使用它提供的两个快捷方法来生成Bootstrap资源引用代码，如下所示： 

<head>
{{ bootstrap.load_css() }}
</head>
<body>
...
{{ bootstrap.load_js() }}
</body>

7个快捷渲染宏

目前，Bootstrap-Flask一共提供了7个宏，分别用来快捷渲染各类Bootstrap页面组件，并提供了对扩展Flask-WTF、Flask-SQLAlchemy的支持。

宏 模板路径 说明
render_field() bootstrap/form.html 渲染一个WTForms表单字段
render_form() bootstrap/form.html 渲染一个WTForms表单类
render_pager() bootstrap/pagination.html 渲染一个简单分页导航，包含上一页和下一页按钮
render_pagination() bootstrap/pagination.html 渲染一个标准分页导航部件
render_nav_item() bootstrap/nav.html 渲染一个导航条目
render_breadcrumb_item() bootstrap/nav.html 渲染一个面包屑条目
render_static() bootstrap/utils.html 渲染一个资源引用语句，即 <link>或<script>标签语句

使用方法相当简单，以渲染Flask-WTF（WTForms）的表单类的render_form()宏为例，你只需要从对应的模板路径导入宏，然后调用即可并传入必要的参数： 

{% from 'bootstrap/form.html' import render_form %}

{{ render_form(form) }}

你可以在项目仓库的examples目录下找到一个完整的示例程序，示例程序的运行方式如下： 

$ git clone https://github.com/greyli/bootstrap-flask.git
$ pip install flask flask-wtf flask-sqlalchemy bootstrap-flask
$ cd bootstrap-flask/examples
$ flask run

现在访问http://localhost:5000即可看到示例程序主页。示例程序包含所有宏的实际调用示例，其中分页宏示例页面如下图所示：

分页宏示例

分页宏示例

欢迎贡献代码

这个项目还刚刚起步，各方面都有需要完善的地方，近期我会为它编写一份完善的文档，欢迎有兴趣的朋友贡献代码！

《使用Bootstrap-Flask在Flask项目中集成Bootstrap》上有20条评论

  1. 头像Djz

    请教一下，如何使用bootstrap-flask实现定时轮询某接口功能，比如我要实现监控功能，需要每n秒对相关接口进行查询更新页面状态，使用bootstrap-flask应该如何实现呢。

    回复 ↓
  2. 头像Djz

    您好，请教一下，我在使用table时想点击新增的Action同时传递一个参数。
    但是使用new_url=url_for不支持传递参数，url_for只能传一个URL，请问如何实现点击新增的+时同事给跳转的接口传递一个参数呢？

    回复 ↓
    1. 头像Djz

      比如我用render_field，如何在渲染这个字段时给输入款自动填写上默认值，我看https://bootstrap-flask.readthedocs.io/en/stable/macros.html#中没有这个功能的参数。

      回复 ↓
    2. 头像Djz

      我目前是在bootsrap-flask渲染完成后，用js取Form内每个元素的ID，单独进行赋值处理，不知道是否有更简便优雅一点的方式

      回复 ↓
      1. 头像李辉 文章作者

        在渲染之前，在视图函数里，你可以给具体的表单字段设置默认值。比如：

        form = UserForm()
        user = User.query.from_db()
        form.usernme.data = user.username
        form.bio.data = user.bio

        回复 ↓
  4. 头像psb

    jinja2.exceptions.UndefinedError: ‘form’ is undefined

    以下
    app.py代码：
    from flask_bootstrap import Bootstrap
    from flask import Flask,render_template

    from flask_sqlalchemy import SQLAlchemy

    import config

    app = Flask(__name__)
    bootstrap = Bootstrap(app)
    @app.route(‘/’)
    def index():
    return render_template(‘index.html’)

    index.html代码：
    {% from ‘bootstrap/form.html’ import render_field, render_hidden_errors %}

    {{ form.hidden_tag() }}
    {{ render_hidden_errors(form) }}
    {{ render_field(form.username) }}
    {{ render_field(form.password) }}
    {{ render_field(form.submit) }}

    回复 ↓
    1. 头像李辉 文章作者

      这里的 index 视图函数并没有向模板里传递一个 form 变量。你需要在视图函数里实例化对应表单类，然后把实例对象传递到模板里:

      def index():
          form = MyForm()
          return render_template(‘index.html’, form=form)

      回复 ↓
  5. 头像Yu Lei

    {%from ‘bootstrap/form.html’ import render_form%}

    这段代码总是报错，显示jinja2.exceptions.TemplateNotFound: bootstrap/form.html。

    请问，这是因为需要项目里面有bootstrap文件夹，然后这个文件及下面form.html文件吗？

    回复 ↓
    1. 头像李辉 文章作者

      这种一般是包安装出错，可以执行下这两条命令重新安装试试：
      $ pip uninstall bootstrap-flask flask-bootstrap
      $ pip install bootstrap-flask

      回复 ↓
      1. 头像yuan

        按上述步骤重新安装了bootstrap-flask，本地扩展包是正常的。但还是报jinja2.exceptions.TemplateNotFound: bootstrap/form.html

        回复 ↓
          1. 头像yuan

            (flask-database) D:\flask-database>pip list
            Package Version
            —————- ——-
            Bootstrap-Flask 1.5.1
            click 7.1.2
            dominate 2.6.0
            Faker 6.3.0
            Flask 1.1.2
            Flask-Bootstrap 3.3.7.1
            Flask-SQLAlchemy 2.4.4
            Flask-WTF 0.14.3
            itsdangerous 1.1.0
            Jinja2 2.11.3
            MarkupSafe 1.1.1
            pip 20.3.1
            python-dateutil 2.8.1
            setuptools 51.1.2
            six 1.15.0
            SQLAlchemy 1.3.23
            text-unidecode 1.3
            visitor 0.1.3
            Werkzeug 1.0.1
            wheel 0.36.2
            WTForms 2.3.3

          2. 头像李辉 文章作者

            很明显，你同时安装了 Flask-Bootstrap 和 Bootstrap-Flask。你需要依次执行下面这两条命令（先卸载两者，然后重新安装 Bootstrap-Flask）：

            pip uninstall bootstrap-flask flask-bootstrap
            pip install bootstrap-flask

  6. 头像moyu

    你好，有个问题请教，我想实现一个SelectField+StringField+SubmitField的表单功能，用户先选择过滤的类型，然后输入关键字，点提交。后台识别输入类型，根据关键字筛选数据返回给用户。
    现在的问题是，如何在视图函数中获得SelectField中用户选择的值？
    如果不行的话有没有其它替代方案？

    回复 ↓
  7. 头像marc

    您好。我运行了flask开发实战中的代码，在部署bluelog到远程主机时出现问题，在本地可以运行并显示网页，但是同样的代码在乌班图18.04系统中提示jinja2.exceptions.TemplateNotFound: bootstrap/nav.html,其中bootstrap已正确初始化，并且在win10中可以完美运行，想请教下您会是什么原因呢

    回复 ↓
    1. 头像李辉 文章作者

      一般这个报错都是依赖安装的问题。你需要先检查下 Boostrap-Flask 有没有正确安装，如果安装了那么要确保没有同时安装 Flask-Bootstrap，否则需要卸载两个包，重新安装 Bootstrap-Flask。

      回复 ↓

撰写评论

电子邮件地址不会被公开，必填项已用 * 标出。