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