twitter-bootstrap 带烧瓶的引导程序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41412159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:29:20  来源:igfitidea点击:

Bootstrap with Flask

pythontwitter-bootstrapflaskflask-bootstrap

提问by Jay Ocean

I am looking to integrate a bootstrap template into my flask program. Specifically: I downloaded the zip file for this template:

我希望将引导程序模板集成到我的烧瓶程序中。具体来说:我下载了这个模板的 zip 文件:

https://startbootstrap.com/template-overviews/sb-admin/

https://startbootstrap.com/template-overviews/sb-admin/

However, the file is in a completely different format from the Flask template/static format.

但是,该文件的格式与 Flask 模板/静态格式完全不同。

I also downloaded Flask-Bootstrap (python) but have not been able to successfully import the template accurately.

我也下载了 Flask-Bootstrap (python) 但一直无法准确地成功导入模板。

I am looking for advice on how to easily import this type of template into my flask code (including css, jQuery, html, etc.). Thanks!

我正在寻找有关如何将此类模板轻松导入我的烧瓶代码(包括 css、jQuery、html 等)的建议。谢谢!

回答by Amin Alaee

You need to create templatesand staticfolders in your project folder, put all .html files in templates folder and all other files (CSS, JS, JPG, etc) in static folder and then in your html file use url_for to load the static files, instead of the default HTML way.

您需要在项目文件夹中创建模板静态文件夹,将所有 .html 文件放在模板文件夹中,将所有其他文件(CSS、JS、JPG 等)放在静态文件夹中,然后在您的 html 文件中使用 url_for 加载静态文件, 而不是默认的 HTML 方式。

This is a sample project structure:

这是一个示例项目结构:

-project
    app.py
    - templates
        index.html
    -static
        -css
          style.css
        -js
          example.js
        -img 
          example.jpg
  • You can also use custom folders and structure but you need to define them while creating the application instance Docs
  • 您还可以使用自定义文件夹和结构,但您需要在创建应用程序实例Docs 时定义它们

回答by r3robertson

The answer by @mohammad-amin is useful for the directory structuring, but I needed an example of how to use url_forwithin HTML. With his example structure and files, you can load style.csslike this:

@mohammad-amin 的答案对目录结构很有用,但我需要一个如何url_for在 HTML 中使用的示例。使用他的示例结构和文件,您可以style.css像这样加载:

<html>
  <head>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  </head>
  <body>
  </body>
</html>