Flask-Bootstrap

小技巧

译者注：这个项目目前已经很久没有更新，而且不支持Bootstrap 4，你可以尝试使用一个更轻量的的替代品：Bootstrap-Flask。

Flask-Bootstrap 把 Bootstrap 打包进一个 扩展，这个扩展主要由一个叫“bootstrap”的蓝本（blueprint）组成。它也可以创建链接从一个CDN上引用Bootstrap资源。

基本用法

开始前第一步是导入和加载扩展:

from flask import Flask
from flask_bootstrap import Bootstrap

def create_app():
  app = Flask(__name__)
  Bootstrap(app)

  return app

# do something with app...

加载后，新的模板可以从bootstrap蓝本自带的模板文件夹里获取。

示例程序

如果你想看一个小的程序示例，可以 到github上浏览 。

模板

创建一个基于Bootstrap的模板很简单:

{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}
<div class="navbar navbar-fixed-top">
  <!-- ... -->
</div>
{% endblock %}

{% block content %}
  <h1>Hello, Bootstrap</h1>
{% endblock %}

所有你要在子模板里做的事情都是基于块（block）的。一些块（像 title ， navbar 或 content ） 是“convenience blocks（便利块）”。严格来说，它们不是必须的，但是被增加用来优化文档结构（方便使用）。

一个非常有用的特性是 Jinja2的super() 函数。它可以让你修改块，而不是替换它们。

可用的块

示例

  • 增加一个自定义的CSS文件:

    {% block styles %}
{{super()}}
<link rel="stylesheet"
      href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}

  • 自定义在Bootstrap的javascript代码 之前 加载的Javascript:

    {% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}

  • 增加 lang="zh" 属性到 <html> 标签:

    {% block html_attribs %} lang="zh"{% endblock %}

静态资源文件

URL端点（url-endpoint） bootstrap.static 可以让你引用Bootstrap资源文件，但通常不需要这样。 更好的做法是使用 bootstrap_find_resource 模板过滤器，它会负责设置CDN。

对当前的资源文件系统的详细描述在 CDN 支持 。

配置

这儿有一些Flask-Bootstrap使用的配置选项，这些是普通的Flask配置变量（关于Flask配置变量， 这里 有一个指南）。

注解

有一个Flask扩展可以用来以 Flask-Appconfig 的形式协助编写 Twelve-Factor 范式的应用程序。它也可以处理其他类型的配置安装 而且和Flask-Bootstrap兼容很好。

选项 默认值  
BOOTSTRAP_USE_MINIFIED True 是否使用压缩过的css/js文件。
BOOTSTRAP_SERVE_LOCAL False 如果设为 True，每次都将加载本地的Bootstrap资源文件。具体见：CDN 支持 。
BOOTSTRAP_LOCAL_SUBDOMAIN None 传递一个 subdomain 变量给已经生成的 Blueprint 。当需要加载不同子域的本地文件时会很有用。
BOOTSTRAP_CDN_FORCE_SSL True 如果一个CDN资源地址以 // 开头，会在地址前添加 'https:' 。
BOOTSTRAP_QUERYSTRING_REVVING True 如果设为 True ，会添加一个包含当前所有本地静态文件版本的查询字符串。这会确保一旦升级Flask-Bootstrap，这些文件就会被更新。

宏

Flask-Bootstrap和宏一起让你的生活更简单。它们需要像下面的例子里这样导入:

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

这会导入包含宏的模板 wtf.html 并简记为 wtf （这些在 WTForms 支持 有一些讨论）。

除了这个页面上的较小的宏，对其他库也广泛支持。具体参见 WTForms 支持 和 Flask-SQLAlchemy 支持 。

跨浏览器支持

跨浏览器支持（特别对Internet Explorer < 9的版本来说）通常是 必要的，但是Flask-Bootstrap没有附加这个功能。你可以下载 html5shiv 和 Respond.js ，把它们放在你程序的静态文件夹，然后像下面的例子那样包含它们

{% import "bootstrap/fixes.html" as fixes %}
{% block head %}
  {{super()}}
  {{fixes.ie8()}}
{% endblock %}
当这些脚本文件没有被包含的时候，会使用CDN链接。所以如果你没有使用
BOOTSTRAP_SERVE_LOCAL ，它们会自动生效。具体见 CDN 支持

这里有关于Flask-Bootstrap如何实现CDN设置的细节。

Google Analytics

Google Analytics 的API最近变化的相当快，目前 analytics.js 是受支持最好的，使用 uanalytics(id, options='auto') 宏

{% import "bootstrap/google.html" as google %}

{% block scripts %}
  {{super()}}
  {{google.uanalytics('U-XXXX-YY')}}
{% endblock %}

可以传入选项给js函数 ga() 调用, 比如说利用 User ID 特性

{{google.uanalytics('U-XXXX-YY', {'userId': 'myUser'})}}

如果你想从外部配置Google Analytics的账户，可以这样

{{google.uanalytics(config['GOOGLE_ANALYTICS_ID'])}}

注解

请确保你至少正确验证（pseudomize）你的用户ID。

官方不赞成使用的 ga.js API 通过一个类似的叫做 analytics(account) 的宏被支持

{{google.analytics(account=config['GOOGLE_ANALYTICS_ID'])}}

Utilities

一些额外的模板宏可以在 bootstrap/utils.html 文件里获取。 和表单宏一样，这些是打算用来帮助快速开发应用的，在实际成熟的应用里，它们应该被合适的解决方案替换掉。

flashed_messages(messages=None, container=True, transform=..., default_category=None, dismissible=False)

渲染Flask的 flash() 消息。用常用的消息类别名称匹配稍不常用的Bootstrap CSS类名。 （即： error -> danger ）

参数:
  • messages -- 一个消息的列表，如果没有给出，会使用 get_flashed_messages() 重新获取它们。
  • container -- 如果设为True，会输出一个完整的 。 <div class="container"> 元素，否则只是每条消息被包裹进一个 <div> 里。
  • transform -- 一个匹配消息类别的字典。查询时对大小写敏感。 默认匹配所有Python loglevel级别的 名称 到Bootdtrap CSS类。
  • default_category -- 如果一个类别在transform里没有匹配，那么它会被直接传入，不作改变。 而如果设置了 default_category ，那么将会被替换为这个值。
  • dismissible -- 如果设为True， 将会输出一个关闭按钮到消息上 如果想要完整功能的可关闭的消息提示， 你需要使用JavaScript消息提示（alert）插件。

需要注意的是，要想让这些工作正常，显示的消息必须匹配一个有效的bootstrap消息类别。（也就是 success ， info ， warning ， danger 之一。）

举例来说：

flash('Operation failed', 'danger')

3.3.5.7之前的Flask-Bootstrap的版本不对 flashed_messages 的内容进行转义，所以没法使用HTML。 这个规则已经改变了，现在推荐使用 Markup 包装器，可以让消息里的HTML生效：

from flask import flash
from markupsafe import Markup

# ...

flash(Markup('Flashed message with <b>bold</b> statements'), 'success')

user_name = '<b>ad username'
flash(Markup('<u>You</u> are our favorite user, <i>'
             + user_name
             + Markup('</i>!'),
     'danger')
icon(type, extra_classes, **kwargs)

在一个 <span> 元素里渲染Glyphicon。

参数:
  • messages -- 图标的短名字，比如 remove 。
  • extra_classes -- 添加到类属性的附加类的列表
  • kwargs -- 附加的HTML属性
form_button(url, content, method='post', class='btn-link', **kwargs)

渲染一个被表单包裹的按钮/链接。

参数:
  • url -- 要提交到的端点（endpoint）。
  • content -- 按钮元素的内容。
  • method -- 周围表单的 method 属性。
  • class -- 按钮元素的 class 属性。
  • kwargs -- 按钮元素的额外HTML属性。

一个方便的小方法，可以用来创建像删除按钮这样的东西，而不用使用 GET 请求。 一个例子

{{form_button(url_for('remove_entry', id=entry_id),
              icon('remove') + ' Remove entry')}}

WTForms 支持

bootstrap/wtf.html 模板包含了帮助你快速输出表单的宏。 Flask-WTF 不是Flask-Bootstrap的依赖，但是必须被正确的安装。 在最近的几个版本中， Flask-WTF 的API变化很大，Flask-Bootstrap目前为 Flask-WTF 的0.9.2版本开发。

最基本的方式是把它们作为手动创建表单的助手。

<form class="form form-horizontal" method="post" role="form">
  {{ form.hidden_tag() }}
  {{ wtf.form_errors(form, hiddens="only") }}

  {{ wtf.form_field(form.field1) }}
  {{ wtf.form_field(form.field2) }}
</form>

然而，你经常只是想快速生成一个表单，而且不需要过度的微调，可以直接使用 quick_form 宏:

{{ wtf.quick_form(form) }}

表单宏参考

quick_form(form, action=".", method="post", extra_classes=None, role="form", form_type="basic", horizontal_columns=('lg', 2, 10), enctype=None, button_map={}, id="")

为一个完整的 Flask-WTF 表单输出Bootstrap-markup。

参数:
  • form -- 要输出的表单类实例。
  • method -- <form> 的method属性。
  • extra_classes -- 添加到 <form> 的类。
  • role -- <form> 的role属性.
  • form_type -- basic ， inline 或是 horizontal 之一。 关于不同表单样式的具体内容，见 Bootstrap 文档。
  • horizontal_columns -- 当使用水平定位的时候，像这样定位表单。必须是一个三元组： (column-type, left-column-size, right-colum-size).
  • enctype -- <form> 的enctype属性。如果设为 None 而且一个 FileField 出现在表单里， 这个值会被自动设置为 multipart/form-data 。
  • button_map -- 一个匹配按钮样式的字典，匹配按钮字段名称到 primary ， danger 或是 success 。 在 button_map 里没有找到的按钮会使用 default 类型（即 btn btn-default）。
  • id -- <form> 的id属性。
form_errors(form, hiddens=True)

渲染包含表单错误消息的字段。这通常只用来输出隐藏字段表单的错误，因为其他的被附加到表单字段上了。

参数:
  • form -- 应该被渲染错误信息的表单。
  • hiddens -- If 如果设为 True ，也渲染隐藏字段的错误。 如果设为 'only' ， 只 渲染这些。
form_field(field, form_type="basic", horizontal_columns=('lg', 2, 10), button_map={})

渲染单个表单字段及周围的元素。主要通过 quick_form 使用。

Flask-SQLAlchemy 支持

Flask-SQLAlchemy 通过 它的 paginate() 对象支持分页。这些可以通过 render_pagination 宏自动渲染。

{% from "bootstrap/pagination.html" import render_pagination %}

{# ... #}

{{render_pagination(query_results)}}
render_pagination(pagination, endpoint=None, prev='«', next='»', ellipses='…', size=None, args={}, **kwargs)

为分页查询渲染一个分页导航。

参数:
  • pagination -- Pagination 的实例。
  • endpoint -- 指定当一个页数被点击时要调用的端点。 将会用给定的端点和一个 page 参数调用 url_for() 。 如果设为 None 使用当前的请求端点。
  • prev -- “上一页”按钮使用的符号或文本。如果设为 None ，按钮将被隐藏。
  • next -- “下一页”按钮使用的符号或文本。如果设为 None ，按钮将被隐藏。
  • ellipses -- 指明跳过的页数使用的符号或文本， 如果设为 None ，则不显示指示符号。
  • size -- 可以是‘sm’或‘lg’，分别表示小的和大的分页导航。
  • args -- 传给 url_for() 的附加的变量。如果``endpoint`` 是 None ，使用 args 和 view_args 。
  • kwargs -- <ul> 元素的额外属性。

Flask-Nav 支持

Flask-Nav 扩展可以让你很容易的创建导航构件，而且Flask-Bootstrap为此附带了一个与Bootstrap相 兼容的渲染器。一旦你初始化一个程序，Flask-Bootstrap默认会注册这个Bootstrap渲染器。

渲染一个简易的（"just works"）导航栏，举例来说

{% block navbar %}
{{nav.mynavbar.render()}}
{% endblock %}

这会自动生成与Bootstrap相兼容的HTML代码。 一个生成能工作的导航栏的最小化的例子是这样的：

from flask_nav import Nav
from flask_nav.elements import Navbar, View

nav = Nav()

@nav.navigation()
def mynavbar():
    return Navbar(
        'mysite',
        View('Home', 'index'),
    )

# ...

nav.init_app(app)

你可以看看示例程序，它有关于导航的更加详细的例子。

Bootstrap渲染器

这个用来渲染Bootstrap式HTML的渲染器（通过 flask_bootstrap.nav.BootstrapRenderer 提供）有一些明确的特性。 换句话说，任何 Navbar 的 title 属性也可以是一个 Link 或 View 。

如果 title 不是 None ，它会被使用 brand 类来渲染。（具体见 Bootstrap docs ） 而且如果它有一个 get_url 方法，那么它的返回值将会是 brand 文本的链接。

CDN 支持

Flask-Bootstrap 支持CDN和本地两种方式来调用资源文件，在运行时是可配置的。 一旦初始化，Flask-Bootstrap会存储一个叫 yourapp.extensions['bootstrap']['cdns'] 的字典到你的程序实例里。 这个字典会匹配名字到 CDN 实例。

当使用其他提供CDN的资源，你也可以在你的模板使用 bootstrap_find_resource() 。 CDN会通过增加新的条目到上面提到的字典里面的方式被添加。

FAQ

为什么在我的模板输出里有我不想出现的自动转义？

确保你的模板文件后缀为 .htm ， .html ， .xml 或是 .xhtml 。 Flask依据模板文件扩展名来设置Jinja2自动转义模式（更多信息见 这个StackOverflow问题 ）。

尽管如此，一般的约定是在你的Flask应用里使用 .html 后缀来命名你的HTML模板。

我怎么向模板添加自定义的JavaScript？

使用Jinja2的 super 连同 scripts 块。这个super函数从父模板 添加块的内容，这种方式甚至可以让你决定是否想要在jQuery/bootstrap之前或之后加载。举例来说:

{% block bootstrap_js_bottom %}
  {{super()}}
  <script src="my_app_code.js">
{% endblock %}

为什么Bootstrap的JavaScript不加载？

一个容易忽视的小错误是块名：尽管有一个块叫 body ，但它通常不是你想替换的那个， 你应该使用 content 。 一般地，JavaScript默认在 <body> 标签的 最后 加载 ）。

可用的块 有更多具体内容。

我在部署时如何加载静态文件？

Flask-Bootstrap只是简单的添加一个叫 bootstrap 的蓝本，在这个意义上来说，它并不特别。 静态文件被匹配到一个特殊的URL前缀（默认为 static/bootstrap ）而且通过一个特定的文件夹提供， 这个文件夹可以在你的virtualenv安装包里找到（比如 lib/python2.7/site-packages/flask_bootstrap/static ）， 所以一个典型的安装将会是设定你的web服务器服务上面提到的文件夹的地址。

一个更优雅的解决方案是在WSGI服务器前放置一个缓存来处理 Cache-Control 报头。 默认情况下，Flask会在加载静态文件时附带一个12小时的过期时间 （你可以使用 SEND_FILE_MAX_AGE_DEFAULT 改变这个值），这应该足够了。

这个方案可以使用 nginx （或者，也许你更喜欢 Varnish ）或者他们的基于 相同工具的云服务应该也足够了。Flask-Bootstrap2.3.2.2通过提供查询字符串加速支持这些， 这确保当你更新Flask-Bootstrap时，更新版本的Bootstrap会被加载。 （查看 BOOTSTRAP_QUERYSTRING_REVVING ）

我如何使用Bootstrap2/3？

目前Bootstrap主要的稳定版本是3，很不幸，它不向后兼容Bootstrap2。除了版本3，Flask-Bootstrap 继续支持Bootstrap2的最新版本，（不过你不要期待有新特性，只是修正了漏洞而已。）当然，还有Bootstrap3。

通过安装Flask-Bootstrap，你将总是得到最新版本，即Boostrap3。要安装（或是保持）Flask-Bootstrap 2， 你必须在你的 setup.py 或 requirements.txt 里指定版本，类似这样:

# other stuff in setup.py
# ...
install_requires=['flask-bootstrap<3', 'another_package']
# ...

把Flask-Bootstrap固定为一个明确的版本是个好主意（例如 'flask-bootstrap==2.3.2.2' ，以此来避免生产环境中的意外）。

更多细节见 使用 Bootstrap 2 文档。

FontAwesome在哪里？

使用Bootstrap2的Flask-Bootstrap版本包含了 FontAwesome ，这对Flask-Bootstrap3和更高版本不再是一个问题。

起初，Bootstrap确实自带了基于图片的图标，不过它缩放的不好， FontAwesome通过提供一个基于矢量图的替代品和附加的图标修正了这个问题。 然而，从Bootstrap3开始，图标被作为字体再次包含了进来，基于这个原因FontAwesome被从扩展里去掉了，以便简化内容。

今天， FontAwesome 不再是唯一的选择，网上有一个对可选替代品的 比较 。

如果你仍然想要使用FontAwesome，通过在你的继承自基模板的模板里增加style块，你可以很容易的包含它:

{% block styles -%}
{{super()}}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
{% endblock styles %}

为什么你附带了jQuery1而不是jQuery2？

在我写这篇文档的时候（2014年七月），在jQuery1和2之间有两个主要的区别：版本1支持IE6-8， 然而版本2放弃了这些对支持旧版本的支持，换来了一个更小的内存占用和一下性能提升。市面上至少有20% 的浏览器（来源 NetMarketShare ）仍然含有不被jQuery2支持的版本。

除非你有特别需要，jQuery2的优点仍然不会大过它对市面上五分之一浏览器的不支持。 最后，Bootstrap和jQuery都是为了简化建站时处理问题的难度，而且这个目标能更好的达到， 离不开对jQuery1的广泛支持。

我如何使用jQuery2而不是jQuery1？

你可以使用Flask-Bootstrap的CDN支持来从不同的来源加载这些资源:

from flask_bootstrap import WebCDN
app.extensions['bootstrap']['cdns']['jquery'] = WebCDN(
    '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/'
)

这会加载 jquery.js 或任何指定的CDN上需要的文件。 如果你更想要传送你自己本地的jQuery版本，你可以使用类似于下面的代码片段:

from flask_bootstrap import StaticCDN
app.extensions['bootstrap']['cdns']['jquery'] = StaticCDN()

注意在这个情况下你需要下载一个合适的 jquery.js 和/或 jquery.min.js ，然后把它放到你的程序的 static 文件夹。

上面的所有配置也会导致jQuery的 BOOTSTRAP_SERVE_LOCAL 选项被忽略。 如果你需要一个更加复杂的配置来支持这个选项，看一下 init_app 的源码和 CDN 支持 的文档。

使用 Bootstrap 2

目前Bootstrap主要的稳定版本是3，它不向后兼容Bootstrap2。除了版本3，Flask-Bootstrap 继续支持Bootstrap2的最新版本。（不过你不要期待有新特性，只是修正了漏洞而已。）

安装

通过安装Flask-Bootstrap，你将总是得到最新版本，即Boostrap3。要安装（或是保持）Flask-Bootstrap 2， 你必须在你的 setup.py 或 requirements.txt 里指定版本，类似这样:

# other stuff in setup.py...
install_requires=['flask-bootstrap<3', 'another_package']

把Flask-Bootstrap固定为一个明确的版本是个好主意（例如 'flask-bootstrap==2.3.2.2' ，以此来避免生产环境中的意外）。

文档

在版本3之前，Flask-Bootstrap只有一个README文件来作为文档。你可以在下面找到整个文件。

你也可以在 GitHub 上查找之前的版本标签。 要看主要的版本2的代码或样例程序，在这里 2.3.2.2 。

Flask-Bootstrap

Flask-Bootstrap 把 Bootstrap 打包进一个 扩展，这个扩展主要由一个叫“bootstrap”的蓝本（blueprint）组成。它也可以创建链接从一个CDN上引用Bootstrap。

用法

这儿是一个例子:: Here is an example:

from flask_bootstrap import Bootstrap

[...]

Bootstrap(app)

这让一些新的模板可供使用，主要是 bootstrap_base.html 和 bootstrap_responsive.html 。 这些是包含所有bootstrap资源文件和预定义块（你可以在块里放你的内容）的空白页。要修改的核心块是 body_content ， 另外查看模板的源码寻找更多可能性。

URL端点（url-endpoint） bootstrap.static 可以让你引用Bootstrap资源文件，但通常不需要这样。 更好的做法是使用 bootstrap_find_resource 模板过滤器，它会负责设置CDN。

宏

一些可供使用的宏可以让你的生活更加简单。这些需要被导入（我建议创建你自己的“base.html”模板， 首先扩展bootstrap的基模板，然后在那里包含这个宏）。

一个“base.html”的例子:

{% extends "bootstrap_responsive.html" %}
{% import "bootstrap_wtf.html" as wtf %}
表单

bootstrap/wtf.html 模板包含了帮助你快速输出表单的宏。 最基本的方式是把它们作为手动创建表单的助手:

<form class="form form-horizontal" method="post">
  {{ form.hidden_tag() }}
  {{ wtf.form_errors(form, "only") }}

  {{ wtf.horizontal_field(form.field1) }}
  {{ wtf.horizontal_field(form.field2) }}

  <div class="form-actions">
     <button name="action_save" type="submit" class="btn btn-primary">Save changes</button>
  </div>
</form>

然而，你经常只是想快速生成一个表单，而且不需要过度的微调，这时可以直接使用 quick_form 宏:

{{ wtf.quick_form(form) }}
配置选项

这里有一些模板使用的配置选项:

选项 默认值  
BOOTSTRAP_USE_MINIFIED True 是否使用压缩过的css/js文件。
BOOTSTRAP_JQUERY_VERSION '1' 模板里这个版本的jQuery通过Google的CDN加载。另外提一下 BOOTSTRAP_USE_MINIFIED ，把这个值设为None会不加载jQuery。要注意的是未压缩的Bootstrap资源在Boostrap的CDN上有时会丢失，所以在没有打开 BOOTSTRAP_USE_MINIFIED 时最好不要用它。
BOOTSTRAP_HTML5_SHIM True 加载默认的IE兼容性修复文件，这些文件通常在使用bootstrap时被加载。
BOOTSTRAP_GOOGLE_ANALYTICS_ACCOUNT None 如果设置，使用这个账号加载 Google Analytics 模板文件（boilerplate）。
BOOTSTRAP_USE_CDN False 如果设为 True ，Bootstrap资源将不会从本地应用实例加载，而是使用CDN（使用 BOOTSTRAP_CDN_BASEURL 配置）。
BOOTSTRAP_CDN_BASEURL 用匹配到 cdnjs.com 的CDN地址建立的字典。 当使用CDN时要添加的Bootstrap和其他文件名的CDN地址。
BOOTSTRAP_CDN_PREFER_SSL True 如果 BOOTSTRAP_CDN_BASEURL 以 // 开头，会在之前添加 'https:' 。
BOOTSTRAP_CUSTOM_CSS False 如果设为 True ，将不会加载Bootstrap的CSS文件。如果你编写了一个自定义的css文件，其中已经包含了bootstrap，可以使用这个选项。
BOOTSTRAP_QUERYSTRING_REVVING True 如果设为 True ，会添加一个包含当前所有本地静态文件版本的查询字符串。这会确保一旦升级Flask-Bootstrap，这些文件就会被更新。
安装

你可以使用 pip 从GitHub或是从 PyPI 安装。

版本笔记

Flask-Bootstrap 尝试跟随Bootstrap更新的脚步。版本变化通常 在 Bootstrap version 和 Flask-Bootstrap iteration 里。举例来说， 版本 2.0.3.2 集成了Bootstrap 2.0.3 版本，并且是Flask-Bootstrap集成这个版本的第二次更新。

如果你需要让你的模板不改变，那么在你的setup.py里固定版本就可以了。

FAQ

  1. 为什么在我的模板输出里有我不想出现的自动转义？ 确保你的模板文件后缀为 .htm ， .html ， .xml 或是 .xhtml 。 Flask依据模板文件扩展名来设置Jinja2自动转义模式（更多信息见 这个StackOverflow问题 ）。

    尽管如此，一般的约定是在你的Flask应用里使用 .html 后缀来命名你的HTML模板。

  2. 我怎么向模板添加自定义的JavaScript？

    使用Jinjia2的 super() 连同 bootstrap_js_bottom 块。这个super函数从父模板 添加块的内容，这种方式甚至可以让你决定是否想要在jQuery/bootstrap之前或之后加载。举例来说:

    {% block bootstrap_js_bottom %}
  {{super()}}
  <script src="my_app_code.js">
{% endblock %}

  3. 我在部署时如何加载静态文件？

    Flask-Bootstrap只是简单的添加一个叫 bootstrap 的蓝本，在这个意义上来说，它并不特别。 静态文件被匹配到一个特殊的URL前缀（默认为 static/bootstrap ）而且通过一个特定的文件夹提供， 这个文件夹可以在你的virtualenv安装包里找到（比如 lib/python2.7/site-packages/flask_bootstrap/static ）， 所以一个典型的安装将会是设定你的web服务器服务上面提到的文件夹的地址。

    一个更优雅的解决方案是在WSGI服务器前放置一个缓存来处理 Cache-Control 报头。 默认情况下，Flask会在加载静态文件时附带一个12小时的过期时间 （你可以使用 SEND_FILE_MAX_AGE_DEFAULT 改变这个值），这应该足够了。

    这个方案可以使用 nginx （或者，也许你更喜欢 Varnish ）或者他们的基于 相同工具的云服务应该也足够了。Flask-Bootstrap2.3.2.2通过提供查询字符串加速支持这些， 这确保当你更新Flask-Bootstrap时，更新版本的Bootstrap会被加载。 （查看 BOOTSTRAP_QUERYSTRING_REVVING ）

变更记录

参见 <no title> ，那里有包括版本2的变更记录。

翻译说明

这是我第一次翻译技术文档，里面难免会有一些小错误，欢迎指正或者到Github上提交修改。

安装

Flask-Bootstrap 可以使用 pip 从 PyPI 上获取安装。建议使用 virtualenv ——没有特别的原因，只是为了最佳实践。安装很简单:

pip install flask-bootstrap

开发用途可以克隆 官方GitHub仓库 然后使用下面的命令安装:

python setup.py develop

起步

直接去读 基本用法 吧。同时还有一份 FAQ 清单可供参阅。

在写这份文档时，最新的Bootstrap版本已经到了Bootstrap 3（现在已经是4了！）。 一个Flask-Bootstrap分支仍然支持Bootstrap2，具体细节在这里 使用 Bootstrap 2 。

版本笔记

Flask-Bootstrap 尝试跟随Bootstrap更新的脚步。版本变化的形式通常为
<Bootstrap 版本>.<Flask-Bootstrap 版本> 。举例来说，

版本 2.0.3.2 集成了Bootstrap 2.0.3 版本，并且是Flask-Bootstrap集成这个版本的第二次更新。

如果你需要让你的模板不改变，那么在你的setup.py里固定版本就可以了。