Flask-bootstrapの導入 | レイアウト変更 - Hope is a Dream. Dream is a Hope.

記事投稿機能の実装と、Bootstrapの利用について

デザインを変更する

仕様

すべてのページを2カラムレイアウトとする
ユーザ定義のCSSは極力避け(clss定義等)Bootstrapライブラリのクラスを使用する

レイアウト

Bootstrapライブラリクラスを使用

カラー

プロトタイプでは変更しない

CSSライブラリ

Bootstrap
- Flask-bootstrapパッケージを利用

Flask-bootstrapの参考記事

Flask-Bootstrap (本家)
- http://pythonhosted.org/Flask-Bootstrap /

Flask-Bootstrap – インストール -

Pipを使ってインストール

Pip install flask-bootstrap

メインモジュールでの呼び出し

From flask_bootstrap import Bootstrap App = Flask(name) Bootstrap(app)

Flask-Bootstrap – テンプレートの使用方法 -

Flask-bootstrapはデフォルトのテンプレートが準備されており、それをHTML内でjinja2を利用し呼び出す
Flask-bootstrap/base.htmlを親テンプレートとして呼び出す

Available blocks
Block name(jinja2ブロック名)	Outer Block(HTML要素)	Purpose
doc		Outermost block.
html	doc	Contains the complete content of the <html> tag.
html_attribs	doc	Attributes for the HTML tag.
head	doc	Contains the complete content of the <head> tag.
body	doc	Contains the complete content of the <body> tag.
body_attribs	body	Attributes for the Body Tag.
title	head	Contains the complete content of the <title> tag.
styles	head	Contains all CSS style <link> tags inside head.
metas	head	Contains all <meta> tags inside head.
navbar	body	An empty block directly above content.
content	body	Convenience block inside the body. Put stuff here.
scripts	body	Contains all <script> tags at the end of the body.

例えば、2カラムレイアウトにする場合

{% block content %}
<div class="container">
<div class="row">
<div class="col-md-4">
{% block left %}{%endblock left %}
</div>
<div class="col-md-8">
{% block right %}{%endblock right %}
</div>
</div>
</div>
{% endblock　content %}