Hope is a Dream. Dream is a Hope. (旧)

非公開ふぃふぃ工房ブログは閉鎖しました。新ブログに移行します。

Flask-bootstrapの導入 | レイアウト変更

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

デザインを変更する

仕様

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

レイアウト

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

カラー

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

CSSライブラリ

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

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

 動くコード

flaskr.v1.3

マシン系

可愛い系

俺の彼女と幼なじみが修羅場すぎる12 (GA文庫)

俺の彼女と幼なじみが修羅場すぎる12 (GA文庫)