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基模板中定義的區塊

表 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應用開發實戰(第二版)》