文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap4工具提示不适用于Flask应用程序。

问Bootstrap4工具提示不适用于Flask应用程序。
EN

Stack Overflow用户
提问于 2019-07-21 13:30:58
回答 4查看 1.2K关注 0票数 1

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

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

代码语言：javascript
复制
Flask==1.0.3
flask-restful==0.3.7
Flask-Bootstrap4==4.0.2
flask-nav==0.6

在我的应用程序中，我使用的是现在的水瓶和水瓶-Bootstrap4。

我使用模板加载子页面。我的布局如下(layout.html)：

​

代码语言：javascript
复制
<!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>

​

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

​

代码语言：javascript
复制
{% 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 %}

​

我的酒瓶应用程序看起来如下：

代码语言：javascript
复制
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秒后显示，但它看起来不像是引导工具提示：我的应用程序

根据引导文档，它应该如下所示：引导页

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

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

flask
bootstrap-4
python-3.7
EN

回答 4

Stack Overflow用户

发布于 2019-07-22 17:49:46

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

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

现在我的layout.html看起来是这样的：

​

代码语言：javascript
复制
<!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>

​

票数 2
EN

Stack Overflow用户

发布于 2019-07-21 22:51:38

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

代码语言：javascript
复制
<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

在jquery/引导脚本加载之后/下面(我猜这将在您的layout.html中)

票数 0
EN

Stack Overflow用户

发布于 2019-07-22 14:07:12

@Dylanj感谢你的回答，我找到了另一种方法让它发挥作用。

我想我可以在本地从Bootstrap包从位置加载css：

代码语言：javascript
复制
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

但是如何在bootstrap.min.css中导入bootstrap.min.css和fontawesall.min.css呢？

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57133681

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档