0

我想在 jinja 模板中调整默认引导类格式。我唯一想做的就是改变 h1 元素的颜色。但不幸的是，它仍然是黑色的。

我正在使用flask和render_template模块。

我在模板中有以下代码：

{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">

{% endblock %}

{% block content %}
    <div class="container">
    <div class="page-header">
        <h1>Hello, Vaclav!</h1>
     </div>
</div>
{% endblock %}

boostrap_adjust.css 看起来像这样：

h1{
    color:blue;
}

感谢您的任何建议！

瓦茨拉夫

4

2 回答 2

0

我终于在这里找到了可行的解决方案：

https://stackoverflow.com/questions/34664156/flask-bootstrap-custom-theme

所以在我的情况下，这有效：

{% block styles %}
{{ super() }}

<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap_adjust.css')}}">

{% endblock %}

.css 文件放置在静态文件夹中。但请注意，静态不是filename参数路径的一部分，因为url_for('static')会自动在此文件夹中查找。

谢谢大家愿意帮忙！

于 2020-07-11T17:53:36.717 回答
0

我将尝试回答“如何使用 .css 文件而不是直接设置样式来调整元素？”这个问题。

进入您的base.html文件，即您扩展的文件，并在标题标记中，在所有其他样式表的末尾创建一个 Jinja2 块，如下所示

{% block stylesheets %}
{% endblock stylesheets %}

第二步是在您的子模板中调用此块并在其中传递您的 .css 文件，而不是在头块中传递它。

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">
{% endblock stylesheets %}

试一试，让我们知道！

于 2020-07-11T16:37:21.297 回答