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()函数。