3.2 使用Flask-Bootstrap集成Bootstrap

Bootstrap 是 Twitter 开发的一个开源 Web 框架，它提供的用户界面组件可用于创建整洁且 具有吸引力的网页，而且兼容所有现代的桌面和移动平台 Web 浏览器。

Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了 Bootstrap 层叠样式表（CSS，cascading style sheet）和 JavaScript 文件的 HTML 响应，并在 HTML、CSS 和 JavaScript 代码中实例化所需的用户界面元素。这些操作最理想的执行场 所就是模板。

要想在应用中集成 Bootstrap，最直接的方法是根据 Bootstrap 文档中的说明对 HTML 模板 进行必要的改动。不过，这个任务使用 Flask 扩展处理要简单得多，而且相关的改动不会 导致主逻辑凌乱不堪。

我们要使用的扩展是 Flask-Bootstrap，它可以使用 pip 安装：

$ pip3 install flask-bootstrap

Flask 扩展在创建应用实例时初始化。示例 3-4 是 Flask-Bootstrap 的初始化方式。

示例 3-4　hello.py：初始化 Flask-Bootstrap

from flask_bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

扩展通常从 flask_ 包中导入，其中 是扩展的名称。多数 Flask 扩展采用两种 初始化方式中的一种。在示例 3-4 中，初始化扩展的方式是把应用实例作为参数传给构造 函数。第 7 章将介绍大型应用初始化扩展的一种高级方式。

初始化 Flask-Bootstrap 之后，就可以在应用中使用一个包含所有 Bootstrap 文件和一般结构 的基模板。应用利用 Jinja2 的模板继承机制来扩展这个基模板。示例 3-5 是把 user.html 改 写为衍生模板后的新版本。

示例 3-5　templates/user.html：使用 Flask-Bootstrap 的模板

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

{% block title %}Flasky{% endblock %}

{% block navbar %}

    

        

             
                Toggle navigation 
                
                
                
            
            Flasky 
        
        

            

                
Home
            
        
    

{% endblock %}

{% block content %}

    
 
        
Hello, {
      { name }}!
 
    

{% endblock %}

Jinja2 中的 extends 指令从 Flask-Bootstrap 中导入 bootstrap/base.html，从而实现模板继承。 Flask-Bootstrap 的基模板提供了一个网页骨架，引入了 Bootstrap 的所有 CSS 和 JavaScript 文件。

上面这个 user.html 模板定义了 3 个区块，分别名为 title、navbar 和 content。这些区块都是基模板提供的，可在衍生模板中重新定义。title 区块的作用很明显，其中的内容会 出现在渲染后的 HTML 文档头部，放在