Edited at

Flask-Bootstrapの使い方

More than 1 year has passed since last update.

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()を使う(scriptstyleの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) }}