Zenn
Closed7

FlaskでBootstrapをローカルで使う方法

Flask
Python
みたらしだんごみたらしだんご

いろいろなページを参考にさせて頂きました。
ディレクトリ構成

|-- app.py
|-- static
|   |-- css
|   |   `-- bootstrap.css
|   |-- jquery-3.6.1.min.js
|   `-- js
|       `-- bootstrap.bundle.min.js
`-- templates
    |-- base.html
    `-- index.html
みたらしだんごみたらしだんご

app.py
IPアドレスとポートは環境に合わせる

from flask import Flask, render_template, url_for

app = Flask(__name__)

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

if __name__ == "__main__":
        app.run(debug=True, host='192.168.1.2', port=1234)
みたらしだんごみたらしだんご

base.html

<!DOCUTYPE html>
<html lang="ja">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.css')}}")>
        {% block head %}{% endblock %}
</head>

<body>
        {% block body %}{% endblock %}
        <script src="{{url_for('static', filename='jquery-3.6.1.min.js')}}")></script>
        <script src="{{url_for('static', filename='js/bootstrap.bundle.min.js')}}"></script>
</body>
</html>
みたらしだんごみたらしだんご

index.html

{% extends 'base.html' %}

{% block body %}
<h1>extend!!</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
{% endblock %}
このスクラップは2022/10/22にクローズされました