使用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安装：

(venv) $ pip install flask-bootstrap

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

示例 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改写为衍生模板后的新版本。

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

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


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


{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle"
            data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href=" ">Flasky</ a>
/div>
      <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li>< a href=" ">Home</ a></li>
          </ul>
      </div>
    </div>
</div>
{% endblock %}


{% block content %}
<div class="container">
    <div class="page-header">
      <h1>Hello, {{ name }}! </h1>
    </div>
</div>
{% endblock %}

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

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