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

6条回复

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

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>

</head>

<body>

</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 %}

你可以在项目仓库的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即可看到示例程序主页。示例程序包含所有宏的实际调用示例，其中分页宏示例页面如下图所示：

分页宏示例

欢迎贡献代码

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

本条目发布于2018年7月15日。属于计算机与编程分类，被贴了 Bootstrap、Bootstrap-Flask、Flask、Flask扩展标签。 ← WTForms自定义验证方法（行内验证器）是如何被调用的？使用Flask-SQLAlchemy调用create_all()创建数据库表前是否需要导入模型类？ →