Flask-Bootstrapの使い方

Flask-Bootstrap: Bootstrapスタイルのアプリを簡単に作れるFlask拡張

インストール

$ pip install flask-bootstrap

使い方

1. Bootstrapインスタンスの作成

from flask import Flask
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

2. Templateの作成

1. extends "bootstrap/base.html" してbootstrapのテンプレートを継承する
2. title navbar contentなどのblockを適宜、記述する

{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}
<div class="navbar navbar-fixed-top">
  <!-- ... -->
</div>
{% endblock %}

{% block content %}
  <h1>Hello, Bootstrap</h1>
{% endblock %}

必要に応じてsuper()を使う（scriptやstyleのblockで必須）

{% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}

便利マクロ

Flask-WTF

BootstrapスタイルのFormを簡単に作れる

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}