python中flask-bootstrap

2017-02-16 19:22
  • 安装 pip install flask-bootstrap
  • 初始化
from flask import Flask, render_template
from flask_bootstrap import Bootstrap

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

@app.route('/')
def index():
    return render_template("index.html")

@app.route('/user/<name>')
def user(name):
    return render_template("user.html", name=name)

if __name__ == "__main__":
    app.run(debug=True)
  • templates/user.html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}
{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, {{ name }}!</h1>
    </div>
</div>
{% endblock %}
  • Jinja2 中的 extends 指令从 Flask-Bootstrap 中导入 bootstrap/base.html
  • 上面这个 user.html 模板定义了 3 个块,分别名为 title 、 navbar 和 content 。这些块都是
    基模板提供的,可在衍生模板中重新定义

  • Flask-Bootstrap 的 base.html 模板还定义了很多其他块,都可在衍生模板中使用

块  名 说  明
doc 整个 HTML 文档
html_attribs html 标签的属性
html html标签中的内容
head head 标签中的内容
title title 标签中的内容
metas 一组 meta 标签
styles 层叠样式表定义
body_attribs body标签的属性
body body标签中的内容
navbar 用户定义的导航条
content 用户定义的页面内容
scripts 文档底部的 JavaScript 声明