基本用法

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

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)的。一些块(像 titlenavbarcontent ) 是“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 支持