web-dev-qa-db-ja.com

Bootstrap with Flask

bootstrapテンプレートをflaskプログラムに統合しようとしています。具体的には、このテンプレートのZipファイルをダウンロードしました。

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

ただし、ファイルはFlaskテンプレート/静的形式とは完全に異なる形式です。

Flask-Bootstrap（python）もダウンロードしましたが、テンプレートを正確にインポートできませんでした。

このタイプのテンプレートを私のflaskコード（css、jQuery、htmlなどを含む）に簡単にインポートする方法についてのアドバイスを探しています。ありがとう！

pythontwitter-bootstrapflaskflask-bootstrap
7
Jay Ocean

プロジェクトフォルダにtemplatesおよびstaticフォルダを作成する必要があります。テンプレートフォルダ内のすべての.htmlファイルと静的フォルダ内の他のすべてのファイル（CSS、JS、JPGなど）、そしてhtmlファイルでは、デフォルトのHTMLの方法ではなく、url_forを使用して静的ファイルをロードします。

これはサンプルプロジェクト構造です：

-project
    app.py
    - templates
        index.html
    -static
        -css
          style.css
        -js
          example.js
        -img 
          example.jpg
  • カスタムフォルダと構造を使用することもできますが、アプリケーションインスタンスの作成時にそれらを定義する必要があります Docs
10
Amin Alaee

@ mohammad-aminによる回答はディレクトリの構造化に役立ちますが、HTML内でurl_forを使用する方法の例が必要でした。彼のサンプル構造とファイルを使用すると、次のようにstyle.cssをロードできます。

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