flask-bootstrap 升级-详细内容 - 黄兵的个人博客

文章内容

2024/7/4 2:30:45,作者: 黄兵

flask-bootstrap 升级

flask-bootstrap 项目已经很久没有更新了，使用的 bootstrap 版本为 3.x 版本，最近项目需要改用 bootstrap 5.x 版本，于是找了一下看看有没有新的版本可用。

找到了一个 bootstrap-flask 项目，这个项目是基于 Bootstrap 4 和 5 为基础。

如果我们原来使用的是 flask-bootstrap，需要首先卸载 flask-bootstrap，之后再安装 bootstrap-flask：

$ pip uninstall flask-bootstrap bootstrap-flask
$ pip install bootstrap-flask

如果我们从 flask-bootstrap 歉意，可以看看这篇文章：Migrate from Flask-Bootstrap

初始化

如果我们需要使用 Bootstrap 4，使用下面的方法初始化：

from flask_bootstrap import Bootstrap4
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap4(app)

如果我们需要使用 Bootstrap 5，使用下面的方法初始化：

from flask_bootstrap import Bootstrap5
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap5(app)

加载静态资源

如果我们需要加载 Bootstrap 静态资源，写法如下：

<head>
....
{{ bootstrap.load_css() }}
</head>
<body>
...
{{ bootstrap.load_js() }}
</body>

页面结构

bootstrap-flask 与原来的 flask-bootstrap 页面结构初始化方式也有很大的不同：

<!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>

渲染表单

如果我们需要通过 Bootstrap 4 渲染表单，写法如下：

{% from 'bootstrap4/form.html' import render_form %}

{{ render_form(form) }}

如果使用 Bootstrap 5 渲染表单，写法如下：

{% from 'bootstrap5/form.html' import render_form %}

显示消息

如果我们需要显示 flask.flash() 的消息，则写法如下：

{% from 'bootstrap4/utils.html' import render_messages %}

<nav>...</nav>
{{ render_messages() }}
<main>...</main>

参考资料：

1、Migrate from Flask-Bootstrap

2、render_messages()

3、flask-bootstrap

上一篇：亚马逊云科技 Amazon Simple Email Service 使用体验
下一篇：通过 Let's Encrypt 自动续订证书

分享到：

发表评论

评论列表

搜索文章

文章归档