前面学习了 Flask 框架的基本用法，以及模板引擎 Jinja2，按理说可以开始自己的 Web 之旅了，不过在启程之前，还有个重要的武器需要了解一下，就是著名的 Bootstrap 框架和 Flask 的结合，这将大大提高开发 Web 应用的效率。
简介Bootstrap 是 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 开发的 Web 项目开发框架，简洁、直观、强悍，使得 Web 开发更加快捷，一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，这么好的开发框架 Flask 一定少不了。
期初在 Flask 的扩展包中有 flask-bootstrap, 不过后来更新很少，后来 greyli 基于 flask-bootstrap 开发了 bootstrap-flask 扩展模块，不经支持最新的 Bootstrap4， 还基于 Jinjia2 模板引擎的宏，做了更多的扩展。值得一提的是 greyli 是个中国帅小伙，能在文章后面的参考链接中找到他。
安装使用 pip 安装：
pip install bootstrap-flask如果之前安装过 flask-bootstrap, 需要将其卸载掉，不然两者会有冲突，如果您遇到错误提示: jinja2.exceptions.UndefinedError: \'bootstrap\' is undefined，很大可能就是这个问题
小试牛刀 导入模块创建一个 flaskbootstrap.py 程序文件，引入模块 flask_bootstrap, 您没看错，引入的并不是 bootstrap-flask：
from flask_bootstrap import Bootstrap注意：我在做示例时，将代码文件名定义为 flask_bootstrap.py, 运行时提示 无法导入 Bootstrap 模块，这是因为文件名与模块 flask_bootstrap 冲突了
然后对 Flask 应用初始化：
app = Flask(__name__) # 创建一个 Flask 应用 bootstrap = Bootstrap(app) # 为应用初始化 bootstrap给应用加载 bootstrap 主要是给应用加上 Jinja2 的扩展，下面的工作就是写模板文件。
创建基础模板bootstrap-flask 虽然基于 flask-bootstrap，但是却没有提供默认的模板文件，期望在后续版本中能有吧，不过自己写也不麻烦，我们在文件夹 templates 中创建一个 base.html，内容是：
{% raw %}
<!-- 引入导航模块的宏 render_nav_item --> {% from \'bootstrap/nav.html\' import render_nav_item %} <!-- 下面是正常的 Bootstrap 页面代码，看起来很复杂，不过可以从官网上拷贝 --> <!DOCTYPE html> <html lang="cn"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>{% block title %} Flask Bootstrap {% endblock %}</title> <!-- 定义标题块 --> <link href="{{ url_for(\'static\', filename=\'favicon.ico\') }}"> {{ bootstrap.load_css() }} <!-- 动态加载 Bootstrap 样式 --> </head> <body> <main> <nav> <div> <a href="#">Python100</a> </div> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <!-- 利用宏 render_nav_item 创建菜单 --> {{ render_nav_item(\'index\', \'首页\', use_li=True) }} </ul> </div> </nav> {% block content %} <!-- 定义内容块 --> <h1> Hello Flask Bootstrap! </h1> {% endblock %} <footer> {% block footer %} <!-- 定义页脚块 --> <small> © 2019 <a href="http://justdopython.com" title="python 100天">Python 技术</a> </small> {% endblock %} </footer> </main> <!-- 动态加载 Bootstrap js 脚本 --> {{ bootstrap.load_js() }} </body> </html>{% endraw %}
是不是感觉很头大，不过是代码多了些，结构很其实很简单，大部分代码是 Bootstrap 提供的基本框架代码，然后加入了一些 bootstrap-flask 的扩展。我们来分析一下：
首先引入导航元素宏 render_nav_item，因为在后面制作导航菜单时要用
然后是大段的 Bootstrap 框架代码
定义块，用来在继承 base.html 的子模板中做替换，其中有 标题、内容和页尾
动态加载 Bootstrap 样式和脚本，通过 bootstrap.load_css() 和 bootstrap.load_js()
在导航菜单的位置，使用宏 render_nav_item 创建一个首页菜单
这样就完成基础模板的定义，稍后会对 render_nav_item、bootstrap.load_css() 和 bootstrap.load_js() 做解释。
创建页面模板有了基础模板，就可以做具体的页面模板了，先做首页 index.html，代码如下:
{% raw %}
{% extends "base.html" %} <!-- 继承基础模板 --> {% block content %} <!-- 替换页面内容 --> <h1> Hello Flask Bootstrap </h1> {% endblock %}{% endraw %}
是不是简洁多了？下面在 flaskbootstrap.py 中加上首页的视图函数:
@app.route(\'/\') def index(): return render_template(\'index.html\') 启动如果一切顺利，访问 localhost:5000 就能看到如下效果: