Flask 引导导航条在烧瓶中不工作_Flask_Bootstrap 4

Flask 引导导航条在烧瓶中不工作

flask bootstrap-4

Flask 引导导航条在烧瓶中不工作,flask,bootstrap-4,Flask,Bootstrap 4,我正在学习烧瓶教程，但我无法使引导导航栏正常工作。我想我所有的代码都是教程指定的，我的文件夹树也是应该的我的app.py： from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)

我正在学习烧瓶教程，但我无法使引导导航栏正常工作。我想我所有的代码都是教程指定的，我的文件夹树也是应该的

我的app.py：

from flask import Flask, render_template

app = Flask(__name__)

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

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

index.html：

{% extends 'layout.html' %}

{% block body %}
  HOME
{% endblock %}

layout.html：

<html>
  <head>
    <meta charset="utf-8">
    <title>MyFlaskApp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    {% include 'includes/_navbar.html' %}
    {% block body %}{% endblock %}

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>


MyFlaskApp
{%include'包含/_navbar.html%}
{%block body%}{%endblock%}

_navbar.html：

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">MyFlaskApp</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/articles">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


切换导航

文件夹结构如下：

尝试将以下代码添加到layout.html文件中

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">MyFlaskApp</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="/">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
          <li class="nav-item"><a class="nav-link" href="/articles">Articles</a></li>
        </ul>
    </div>

它将给出以下输出：

您正在将引导3导航栏与引导4结合使用。阅读文档：