Flask-Bootstrap集成Twitter Bootstrap

Bootstrap是Twitter开发的一个开源的客户端框架。要想在程序中集成Bootstrap，要对模板进行改动，不过更简单的方法是使用名为Flask-Bootstrap的Flask扩展，简化集成的过程。

1.初始化Flask-Bootstrap

from flask.ext.bootstrap import Bootstrap
#...
bootstrap = Bootstrap(app)

Flask-Bootstrap从flask.ext中导入，然后把程序实例传入构造方法进行初始化。

2.使用Flask-Bootstrap的模板

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

extends指令从Flask-Bootstrap中导入bootstrap/base.html,从而实现模板继承。
block和endblock指令定义的块中的内容可添加到基模板中。
navor块使用Bootstrap组件定义了一个简单的导航条。content块中有个div容器，其中包含一个页面头部。
××Flask-Bootstrap基模板中定义的块××
doc 整个html文档
html_attribs html标签的属性
html html标签中的内容
head head标签中的内容
title title标签中的内容
metas 一组meta标签
styles 层叠样式表定义
body_atteibs body标签的属性
body body标签中的内容
navbar 用户定义的导航条
content 用户定义的页面内容
scripts 文档底部的JavaScipt声明

如果需要向已有的内容的块中添加内容，则必须使用jinjia2的super()函数。