python flask整合bootstrap框架

1. 安装Flask和Bootstrap库

pip install flask
pip install flask-bootstrap

2.在app.py 文件中添加以下代码：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
# 创建bootstrap 对象
bootstrap = Bootstrap(app)

@app.route('/index')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

解释：定义了一个名为app的Flask应用程序，并将它与一个名为bootstrap的Flask_Bootstrap实例进行了实例化。接下来，我们创建了一个名为index的视图函数，并指定了一个名为index.html的模板。
3.创建index.html的模板

{%extends "bootstrap/base.html"%}

{%block title %}Flask{% endblock %}

{%block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
            data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}
{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello world!</h1>
    </div>
</div>
{% endblock %}

解释：在项目文件夹中创建一个名为templates的文件夹，并在其中创建一个名为index.html的HTML模板。
4.运行：运行app.py文件来启动Flask应用程序。
5.效果：

6.遇见的问题：
flask 整合 bootstrap 时运行代码报错 jinja2.exceptions.UndefinedError: ‘bootstrap’ is undefined
解决思路：
通常是由于 Flask 模板中缺少 Bootstrap 所需要的模板文件而引起的。
1.确保已经正确安装了 Flask 和 Bootstrap。
2.确保在 Flask 应用程序中正确注册了 Bootstrap：在 Flask 中，可以通过创建一个 bootstrap 对象并将其与应用程序实例化来实现此目的，然后在模板中使用该对象来呈现 Bootstrap 组件。
3.确保在 Flask 模板中正确引用了 Bootstrap：
例如，如果你正在使用 Jinja2 模板引擎，则需要确保在模板中引入 Bootstrap。可以使用以下代码片段来实现：

{% extends "bootstrap/base.html" %}

{% block content %}
    <!-- 在此处放置页面内容 -->
{% endblock %}