Jor*_*dan 8 html css python flask twitter-bootstrap
似乎我使用{% extends "base.html" %}它正确地继承了模板,但导航栏不使用bootstrap.
如果我使用{% extends "bootstrap/base.html" %}它甚至不起作用.我没有得到错误,但它只是将标题设置为索引,然后页面为空.
另一个注意事项:我让导航栏出现的唯一方法是将其直接放入index.html并使用{% extends "bootstrap/base.html" %}
我正在使用Miguel Grinberg的Flask Web Development,除了明显的内容之外,代码是相同的.
我究竟做错了什么？有没有人有足够的资源慢慢跳进Flask,而不是先潜入水中？我无法理解这些小细节.
base.html文件:
{% extends "bootstrap/base.html" %}
<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
</head>
<body>
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/bootstrap"></a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>
index.html的:
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
当使用模板继承，通常限定在基座模板布局的结构，然后提供在块中的每一子模板（等的具体细节content，page_content等）。
在上面base模板本身是子模板（“bootstrap/base.html”）的示例中，可以使用相同的模式。
与其定义 HTML 标签（如<html>、<head>等），不如使用相应的块。Flask bootstrap定义了与这些 HTML 标签中的每一个相对应的块，子模板可以覆盖这些块。
因此，如果您base.html按如下方式更改模板，则index模板可以使用中定义的布局bootstrap/base：
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/bootstrap"></a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
请注意，在head块中，我们使用的super()是带入head块中定义的任何 Flask 引导程序（可能是加载 CSS、JS 文件等）。这允许base.html模板自定义该head部分。但是如果你不需要这个控件而只想指定页面的标题，那么你可以避免覆盖head块而只定义title块。要执行此更改base.html文件以如下方式启动：
{% extends "bootstrap/base.html" %}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
删除{% block head %} ...部分。然后修改您的index.html模板以定义page_name块而不是title：
{% extends "base.html" %}
{% block page_name %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
现在索引页面的标题将是“Index - MyFlask”，因此您可以为所有页面的标题使用一个共同的后缀。
或者，如果你需要在每个页面有自己特定的标题，您可以定义title在那里块，重写title块base.html。