使用 Flask 导入引导程序

Posted

技术标签:

【中文标题】使用 Flask 导入引导程序【英文标题】:Import Bootstrap with Flask 【发布时间】:2020-11-20 17:03:27 【问题描述】:

我尝试导入 bootstrap 存档,但遇到此错误: "GET /bootstrap.css HTTP/1.1" 404

当我使用这个标签链接时,它工作得很好。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

在使用 Flask 时可以将 bootstrap 作为文件导入吗?如果没有,我想知道为什么,请

html:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="bootstrap.css">
    <title>% block title %% endblock %</title>
</head>
<body>
    <h1>Hello User</h1>
    % block content %
    % endblock %
</body>
</html>
python:
from flask import Flask, url_for, redirect, render_template
app = Flask(__name__)

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

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

【问题讨论】:

【参考方案1】:

您可以尝试使用他们在文档中为您提供的链接标签而不是文件来链接引导程序。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

【讨论】:

谢谢!我已经重写了这个问题,以便更好地理解问题【参考方案2】:

bootstrap.css 放入您的static 目录,然后:

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

【讨论】:

【参考方案3】:

首先,回答您的问题:在使用 Flask 时可以将引导程序作为文件导入吗?如果没有,我想知道原因:

是的,你刚刚做到了,但你只需要链接插入这个 css 文件到正确的位置并用正确的命令指向它。下载后就像任何其他 CSS 文件一样。

据我了解,您已通过从此处下载“编译的 CSS 和 JS”来导入引导程序 ===>https://getbootstrap.com/docs/4.5/getting-started/download/

假设您的 Boostrap 文件位于“静态”文件夹中,然后位于“样式”中:

/app
- app.py
/views
    - view.py 
/templates
    - index.html
/static
       /style
           - bootstrap.css

这两个都适合你:

    (最常见的用法)
`<link rel="stylesheet" type="text/css" href=" url_for('static', filename='style/bootstrap.css') ">`
    第一个示例取决于 .html 在目录中的位置,在此示例中,它将位于模板下方并且是 'index.html
<link rel="stylesheet" type="text/css" href="../static/style/bootstrap.css">

最重要的是css文件在static文件夹中,必须正确指向。

关于这个主题的一些非常好的答案的更多参考:

Application not picking up .css file (flask/python):

请注意,您可以覆盖静态文件夹路径:

app = Flask(__name__, static_url_path="/STATIC_FOLDER", static_folder='STATIC_FOLDER')
More regarding change static folder default From Flask DOCS

【讨论】:

很好的解释费德里科!谢谢

以上是关于使用 Flask 导入引导程序的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 导入引导程序 .js 和 .css

将引导程序导入 Vue 不起作用

即使在引导程序中安装 pip 后,导入也无法在 Amazon EMR 中工作

使用 CSS 引导程序时出现奇怪的错误

Angular2 webpack:如何导入引导 css

Jinja2 和 Flask:引导选项卡仅显示第一个选项卡的内容,而不显示其余选项卡的内容