Flask-Bootstrap
Bootstrap 是 Twitter 開發的一個開源框架，它提供的用戶界面組件可用於創建整潔且具有吸引力的網頁，而且這些網頁還能兼容所有現代 Web 瀏覽器。
Bootstrap 是客戶端框架，因此不會直接涉及服務器。服務器需要做的只是提供引用了 Bootstrap 層疊樣式表（CSS）和 JavaScript 文件的 HTML 響應， 並且 HTML、CSS 和 JavaScript 代碼中實例化所需組件。這些操作最理想的執行場所就是模版。
Flask-Bootstrap 可以在程序中集成 Bootstrap
安裝
pip install flask-bootstrap使用
Flask 擴展一般都在創建程序實例時初始化。
from flask_bootstrap import Bootstrap
#...
bootstrap = Bootstrap(app)初始化 Flask-Bootstrap 之後，就可以在程序中使用一個包含所有Bootstrap 文件的基模版。這個模版利用 Jinja2 的模版繼承機制，讓程序擴展一個具有基本頁面結構的基模版，其中就有用來引入 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 文件。
基模版中定義了可在衍生模版中重定義的塊。block 和 endblock 指令定義的塊中的內容可添加到基模版中。
上面這個示例定義了3個塊，分別名爲 title、navbar和content。這些塊都是基模版提供的，可在衍生模版中重新定義。
Flask-Bootstrap 的 base.html 模塊定義的可用塊。
| 塊名 | 說明 |
|---|---|
| doc | 整個HTML文檔 |
| html_attribs | <html> 標籤的屬性 |
| html | <html> 標籤的內容 |
| head | <head> 標籤的內容 |
| title | <title> 標籤的內容 |
| metas | 一組 <meta> 標籤 |
| styles | 層疊樣式表定義 |
| body_attribs | <body> 標籤的屬性 |
| body | <body> 標籤的內容 |
| navbar | 用戶自定義的導航條 |
| content | 用戶定義的頁面內容 |
| scripts | 文檔底部的 JavaScript 聲明 |
注意：上表中很多塊都是 Flask-Bootstap 自用的， 如果直接重定義可能會導致一些問題。如果程序需要向已經有內容的塊中添加新內容， 必須使用 Jinja2 提供的 super() 函數。例如，如果要在衍生模版中添加新的 JavaScript 文件，需要這麼定義：
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}
