Python
Flask
Flask-Bootstrap

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) }}