说明

• 操作系统：Windows 10
• Python 版本：3.7x
• 虚拟环境管理器：virtualenv
• 代码编辑器：VS Code

实验目标

通过使用 Bootstrap-Flask 来进行页面美化，为网站应用上 Bootstrap4.x 的样式。

由于 Flask-Bootstrap 很久没有更新，并且不支持 BS4，所以这里我们使用支持 BS4 的 Bootstrap-Flask 来进行界面美化

安装

pip install bootstrap-flask

使用

修改 todolist\app\__init__.py 文件，示例代码如下所示

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bootstrap import Bootstrap
from config import Config

app = Flask(__name__)
app.config.from_object(Config)
db = SQLAlchemy(app)
bootstrap = Bootstrap(app)

from app import views

在 todolist\app 目录下创建 views.py 文件，示例代码如下所示：

from app import app
from flask import render_template


@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html', title="首页")


@app.route('/login')
def login():
    return render_template('login.html', title='登录')


@app.route('/register')
def register():
    return render_template('register.html', title='注册')

在 todolist\templates 目录下创建一个 nav.html 文件，示例代码如下所示：

在 todolist\templates 目录下创建一个 login.html 文件，示例代码如下所示：

{% extends 'base.html' %} {% block content %}
登录页面
{% endblock %}

在 todolist\templates 目录下创建一个 register.html 文件，示例代码如下所示：

{% extends 'base.html' %} {% block content %}
注册页面
{% endblock %}

修改 todolist\templates\index.html，示例代码如下所示

{% extends 'base.html' %} {% block content %}
首页
{% endblock %}

在 todolist\static 目录下添加一个网站的 ico 格式 图片资源 ，取名 favicon.ico

修改 todolist\templates\base.html，示例代码如下所示

    {% block head %}
    
    
     {% block styles %}
    
     {{ bootstrap.load_css() }} {% endblock %} {% if title %}
    
    {% else %}
    
    {% endif %} {% endblock %}




    {% include "nav.html" %}

    

        
        {% block content %}{% endblock%}
    

    {% block scripts %}
    
    {{ bootstrap.load_js() }} {% endblock %}

此时，打开当前项目的 shell 窗口，执行 python manage.py 即可看到 Bootstrap4 的样式已经被应用到我们的网站页面上了。

参考

• bootstrap-flask
• Bootstrap-Flask
• Flask-Bootstrap
• Bootstrap 4.3