Flask-Bootstrap

Bootstrap 是 Twitter 开源的一个 CSS/HTML 框架，它让 Web 开发变得更加迅速，简单。要想在我们的 Flask 应用中使用 Boostrap，有两种方案可供选择：

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

安装

使用 pip 安装：

1. $ pip install flask-bootstrap

使用

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

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

1. # -*- coding: utf-8 -*-

3. from flask import Flask, render_template
4. from flask_bootstrap import Bootstrap

6. app = Flask(__name__)
7. Bootstrap(app)  # 把程序实例即 app 传入构造方法进行初始化

9. @app.route('/')
10. def index():
11. return render_template('index.html')

13. @app.route('/book')
14. def book():
15. books = ['the first book', 'the second book']
16. return render_template('index.html', books=books)

18. @app.route('/movie')
19. def movie():
20. movies = ['the first movie', 'the second movie']
21. return render_template('index.html', movies=movies)

23. if __name__ == '__main__':
24. app.run(host='127.0.0.1', port=5200, debug=True)

初始化 Flask-Bootstrap 之后，我们的模板通过继承一个基模板，即 bootstrap/base.html，就可以使用 Bootstrap 了。

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

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

3. {% block title %}Demo{% endblock %}

5. {% block navbar %}
6. <div class="navbar navbar-inverse">
7. <div class="container">
8. <div class="navbar-header">
9. <a class="navbar-brand" href="{{ url_for('index') }}">首页</a>
10. </div>
11. <div class="navbar-collapse collapse">
12. <ul class="nav navbar-nav">
13. <li><a href="{{ url_for('book') }}">读书</a></li>
14. <li><a href="{{ url_for('movie') }}">电影</a></li>
15. </ul>
16. </div>
17. </div>
18. </div>
19. {% endblock %}

21. {% block content %}
22. <div class="container">
23. {% if books %}
24. <ul>
25. {% for book in books %}
26. <li>{{ book }}</li>
27. {% endfor %}
28. </ul>
29. {% elif movies %}
30. <ul>
31. {% for movie in movies %}
32. <li>{{ movie }}</li>
33. {% endfor %}
34. </ul>
35. {% else %}
36. <p><a href="{{ url_for('book') }}"> 读书 </a></p>
37. <p><a href="{{ url_for('movie') }}"> 电影 </a></p>
38. {% endif %}
39. </div>
40. {% endblock %}

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

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

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

注意到，我们在模板中也定义了诸如 {% block title %} Demo {% endblock %} 的块，这些块是基模板提供的，可在我们的衍生模板中重新定义。其中，title 块中的内容会被放到渲染后的 <title> 标签中，navbar 块表示页面中的导航条，content 块表示页面的主体内容。

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

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

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

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

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

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

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

更多阅读

• Flask-Bootstrap