Flask-Bootstrap

• 第 1 种，在我们的 Jinja 模板中直接引入 Bootstrap 层叠样式表 (CSS) 和 JavaScript 文件，比如 ，bootstrap.min.js；
• 第 2 种，也是更简单的方法，就是使用一个 的扩展，它简化了集成 Bootstrap 的过程；

安装

使用 安装：

使用

现在，让我们写一个简单的 hello world 例子。

首先，新建一个 app.py 文件，代码如下：

# -*- coding: utf-8 -*-
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/book')
def book():
    books = ['the first book', 'the second book']
@app.route('/movie')
    movies = ['the first movie', 'the second movie']
    return render_template('index.html', movies=movies)
if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5200, debug=True)

新建一个 templates 文件夹，在该文件夹中添加一个 index.html 的文件，代码如下：

注意到上面模板中的第 1 行：

{% extends "bootstrap/base.html" %}

这是利用了 Jinja2 的模板继承机制，我们在前面也已经讲过了，如果忘了，可点此查看。extends 指令从 中导入 bootstrap/base.html，该基模板引入了 Bootstrap 中的所有 CSS 和 JavaScript 文件。通过这一句，我们就可以在模板中使用 Bootstrap 了，是不是很简单？

基模板除了提供上面的块，还定义了很多其他块，下面的表格列出了所有可用的块：

上面的块，比如 title, navbar 和 content 是可以直接重定义的，但是，如果程序需要向已经有内容的块添加新内容，必须使用 Jinja2 提供的 super() 函数，比如 styles 块和 scripts 块：

• 如果我们想添加自己的样式表，需要这样：

• 如果我们想添加自己的 JavaScript 文件，需要这样：

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

本文完整的代码可在这里下载。

更多阅读

• Flask-Bootstrap