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 %}
<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 文档头部，放在 <title> 标签中。navbar 和 content 这两个区块分别表示页面中的导航栏和主体内容。

在这个模板中，navbar 区块使用 Bootstrap 组件定义了一个简单的导航栏。content 区块中有个 <div> 容器，其中包含一个页头。之前版本中的欢迎消息，现在就放在这个页头里。改动之后的应用如图 3-1 所示。

图 3-1：使用 Bootstrap 的模板

Flask-Bootstrap 的 base.html 模板还定义了很多其他区块，都可在衍生模板中使用。表 3-2 列出了所有可用的区块。

表3-2：Flask-Bootstrap基模板中定义的区块

区块名	说明
doc	整个 HTML 文档
html_attribs	`<html>` 标签的属性
html	`<html>` 标签中的内容
head	`<head>` 标签中的内容
title	`<title>` 标签中的内容
metas	一组 `<meta>` 标签
styles	CSS 声明
body_attribs	`<body>` 标签的属性
body	`<body>` 标签中的内容
navbar	用户定义的导航栏
content	用户定义的页面内容
scripts	文档底部的 JavaScript 声明

表 3-2 中的很多区块都是 Flask-Bootstrap 自用的，如果直接覆盖可能会导致一些问题。例如，Bootstrap 的 CSS 和 JavaScript 文件在 styles 和 scripts 区块中声明。如果应用需要向已经有内容的块中添加新内容，必须使用 Jinja2 提供的 super() 函数。例如，如果要在衍生模板中添加新的 JavaScript 文件，需要这么定义 scripts 区块：

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script> 
{% endblock %}

《基于Python的Web应用开发实战(第二版)》

3.2 使用Flask-Bootstrap集成Bootstrap

猜你喜欢