Bootstrap4 工具提示不适用于 Flask Web 应用程序

我已经创建了安装了Bootstrap插件的Flask应用程序。但是引导页面 https://getbootstrap.com/docs/4.0/components/tooltips/中显示的工具提示不起作用。我尝试了我在互联网上找到的"一切"，但没有运气。

我正在使用Python3.7和docker-compose来构建应用程序。安装了以下插件：

Flask==1.0.3
flask-restful==0.3.7
Flask-Bootstrap4==4.0.2
flask-nav==0.6

在我的应用程序中，我现在使用Flask和Flask-Bootstrap4。

我正在使用模板来加载子页面。我的布局是这样的(布局.html)：

<!doctype html>
<html lang="en">
<head>
{% extends "bootstrap/base.html" %}
<link rel="stylesheet" href="static/azcss.css"/>
</head>
<body>
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand">Azure</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('resource_manager') }}">Resource Manager</a>
</li>
</ul>
</div>
</nav>
{% endblock navbar %}
{% block content %}
{% endblock content%}
</body>
</html>

在 {% 块内容 %} 中，我正在加载我的主页(主页.html)：

{% extends "layout.html" %}
{% block content %}
<div class="container-fluid">
<p>Home</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock content %}

我的 Flask 应用如下所示：

from flask import Flask
from flask import render_template, url_for, request
from flask_bootstrap import Bootstrap
from utils.azfunc.resource_groups_mgmt import list_all_resource_group_name, create_resource_group

app = Flask(__name__)
Bootstrap(app)

@app.route('/')
def base() -> 'html':
return render_template('layout.html')

@app.route('/home')
def home() -> 'html':
return render_template('home.html')

@app.route('/resource_manager')
def resource_manager() -> str:
return render_template('resource_manager.html')

@app.route('/list_res_groups')
def list_res_grps() -> 'html':
return render_template('list_res_groups.html', res_grps=list_all_resource_group_name())

@app.route('/create_res_group_form', methods=['GET', 'POST'])
def create_res_grp_form() -> 'html':
return render_template('create_res_group_form.html')

@app.route('/create_res_group', methods=['GET', 'POST'])
def create_res_grp() -> 'html':
res_group = request.form['azgroup']
region = request.form['azregion']
resource_group_created = create_resource_group(res_group, region)
return render_template('create_res_group.html', result=resource_group_created)

if __name__ == '__main__':
app.run(host='0.0.0.0', port=80, debug=True)

结果：

工具提示在 2,3 秒后显示，但看起来不像是引导工具提示：我的应用

根据 Bootstrap 文档，它应该看起来像这样：引导程序页面

Web 浏览器开发人员模式下的代码显示脚本应该可以工作：开发人员模式代码

你能帮我解决这个问题吗？

我通过在%content%部分添加脚本来解决问题。

感谢您 dylanj.nz 的提示，帮助我找到了解决方案。

现在我的布局.html如下所示：

<!doctype html>
<html lang="en">
<head>
{% extends "bootstrap/base.html" %}
<link rel="stylesheet" href="static/azcss.css"/>
</head>
<body>
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('base') }}">Azure</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('resource_manager') }}">Resource Manager</a>
</li>
</ul>
</div>
</nav>
{% endblock navbar %}
{% block content %}
{% block scripts %}
{{ super() }}
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>

{% endblock scripts %}
{% endblock content %}
</body>
</html>

您看到的是默认的 html 工具提示，而不是引导程序。这可能是脚本加载的顺序，请尝试移动您的

<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>

在加载 jquery/bootstrap 脚本之后/下方(我猜这会在你的布局中.html)

@Dylanj多亏了您的回答，我找到了另一种让它工作的方法。

我想我可以从位置从引导包本地加载 css：

root@9949973a7f22:/usr/local/lib/python3.7/site-packages/flask_bootstrap/static/css# ls -al
total 1696
drwxr-sr-x 2 root staff   4096 Jul 17 16:16 .
drwxr-sr-x 6 root staff   4096 Jul 17 16:16 ..
-rw-r--r-- 1 root staff  43852 Jul 17 16:16 bootstrap-grid.css
-rw-r--r-- 1 root staff  95910 Jul 17 16:16 bootstrap-grid.css.map
-rw-r--r-- 1 root staff  34243 Jul 17 16:16 bootstrap-grid.min.css
-rw-r--r-- 1 root staff  76209 Jul 17 16:16 bootstrap-grid.min.css.map
-rw-r--r-- 1 root staff   4798 Jul 17 16:16 bootstrap-reboot.css
-rw-r--r-- 1 root staff  57721 Jul 17 16:16 bootstrap-reboot.css.map
-rw-r--r-- 1 root staff   3936 Jul 17 16:16 bootstrap-reboot.min.css
-rw-r--r-- 1 root staff  25881 Jul 17 16:16 bootstrap-reboot.min.css.map
-rw-r--r-- 1 root staff 178152 Jul 17 16:16 bootstrap.css
-rw-r--r-- 1 root staff 411645 Jul 17 16:16 bootstrap.css.map
-rw-r--r-- 1 root staff 144877 Jul 17 16:16 bootstrap.min.css
-rw-r--r-- 1 root staff 551641 Jul 17 16:16 bootstrap.min.css.map
-rw-r--r-- 1 root staff  35359 Jul 17 16:16 fontawesome-all.min.css
-rw-r--r-- 1 root staff  33994 Jul 17 16:16 fontawesome.min.css

但是如何在布局.html中导入bootstrap.min.css和fontawesome-all.min.css？

我通过在 Flask 应用程序中添加以下行解决了有关在本地加载引导内容的问题：

app.config['BOOTSTRAP_SERVE_LOCAL'] = True

我也读过脚本：

<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>

应在引导脚本之后加载。

你能告诉我怎么做吗？

相关内容

最新更新

热门标签：