Flask-13-集成bootstrap

一、介绍

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

在基本模板中调用它，例如：

首页

{{ bootstrap.load_css() }}

{{ bootstrap.load_js() }}

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

3.3 运行效果

image.png

查看源代码

image.png3.4 官方推荐的模板

{% block head %}

{% block styles %}

{{ bootstrap.load_css() }}

{% endblock %}

Your page title

{% endblock %}

{% block content %}{% endblock %}

{% block scripts %}

{{ bootstrap.load_js() }}

{% endblock %}

四、宏

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

4.1 常用的宏