一、介绍

Bootstrap-Flask 是 Bootstrap 和 Flask 的 Jinja 宏的集合。它可以帮助您更轻松地将与 Flask 相关的数据和对象呈现为 Bootstrap 标记 HTML。
bootstrap-falsk，可以让后端程序员直接使用bootstrap，并且借助于jinja的宏的功能，实现符合jinja用法的bootstrap实现。

二、安装

pip install bootstrap-flask

安装后，支持bootstrap4和bootstrap5

三、快速入门

3.1 后端初始化

# 导入falsk
from flask import Flask, render_template, jsonify
# 引入bootstrap5
from flask_bootstrap import Bootstrap5
from flask import Flask

app = Flask(__name__)
bootstrap = Bootstrap5(app)


# 路由
@app.route('/')
def hello_world():
    return render_template('index.html')


# 开启运行
if __name__ == '__main__':
    app.run(debug=True)
    """
    debug,是否开启调试模式，开启后，重新启动程序，当再次修改Python代码后，会立即启动
    port,启动指定服务器的端口号，默认是5000
    host，主机，默认是127.0.0.1；如果指定0.0.0.0代表本机的所有IP    
    """

3.2 在模板中引入js和css

Bootstrap-Flask 提供了两个帮助程序函数来加载模板中的 Bootstrap 资源：和。bootstrap.load_css()``bootstrap.load_js()
在基本模板中调用它，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    {{ bootstrap.load_css() }}
</head>
<body>
<h2>这里是首页 {{ title }}</h2>
<button type="button" class="btn btn-primary">Primary</button>

{{ bootstrap.load_js() }}
</body>
</html>

您可以传递要固定要使用的 Bootstrap 版本。它默认从 CDN 加载文件。设置为使用内置本地文件。但是，这些方法是可选的，您也可以自己手动编写和标记以包含 Bootstrap 资源（来自您的文件夹或 CDN）。

3.3 运行效果

查看源代码

3.4 官方推荐的模板

<!doctype html>
<html lang="en">
    <head>
        {% block head %}
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        {% block styles %}
            <!-- Bootstrap CSS -->
            {{ bootstrap.load_css() }}
        {% endblock %}

        <title>Your page title</title>
        {% endblock %}
    </head>
    <body>
        <!-- Your page content -->
        {% block content %}{% endblock %}

        {% block scripts %}
            <!-- Optional JavaScript -->
            {{ bootstrap.load_js() }}
        {% endblock %}
    </body>
</html>

四、宏

宏是什么，宏是jinja的宏，是使用jinja的方式来使用bootstrap。

4.1 常用的宏

宏观	模板路径	描述
render_field（）	bootstrap5/form.html	呈现 WTForms 表单字段
render_form（）	bootstrap5/form.html	呈现 WTForms 表单
render_form_row（）	bootstrap5/form.html	呈现网格窗体的一行
render_hidden_errors（）	bootstrap5/form.html	呈现隐藏表单字段的错误消息
render_pager（）	bootstrap5/pagination.html	呈现基本的 Flask-SQLAlchemy pagniantion
render_pagination（）	bootstrap5/pagination.html	呈现标准 Flask-SQLAlchemy 分页
render_nav_item（）	bootstrap5/nav.html	呈现导航项
render_breadcrumb_item（）	bootstrap5/nav.html	呈现痕迹导航项
render_static（）	bootstrap5/utils.html	呈现资源引用代码