Flask從入門到精通之Flask-Bootstrap的使用

　　Bootstrap（http://getbootstrap.com/）是Twitter 開發的一個開源框架，它提供的用戶界面組件可用於建立整潔且具備吸引力的網頁，並且這些網頁還能兼容全部現代Web 瀏覽器。

　　要想在程序中集成Bootstrap，顯然要對模板作全部必要的改動。不過，更簡單的方法是使用一個名爲Flask-Bootstrap 的Flask 擴展，簡化集成的過程。Flask-Bootstrap 使用pip安裝：

pip install flask_bootstrap

　　Flask 擴展通常都在建立程序實例時初始化，下面是Flask_Bootstrap的初始化方法

from flask.ext.bootstrap import Bootstrap
bootstrap = Bootstrap(app)

　　初始化Flask-Bootstrap 以後，就能夠在程序中使用一個包含全部Bootstrap 文件的基模板。這個模板利用Jinja2 的模板繼承機制，讓程序擴展一個具備基本頁面結構的基模板，其中就有用來引入Bootstrap 的元素。

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

{%block title %}Flask{% 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 指令定義的塊中的內容可添加到基模板中。上面這個user.html 模板定義了3 個塊，分別名爲title、navbar 和content。這些塊都是基模板提供的，可在衍生模板中從新定義。title 塊的做用很明顯，其中的內容會出如今渲染後的HTML 文檔頭部，放在<title> 標籤中。navbar 和content 這兩個塊分別表示頁面中的導航條和主體內容。在這個模板中，navbar 塊使用Bootstrap 組件定義了一個簡單的導航條。content 塊中有個<div> 容器，其中包含一個頁面頭部。以前版本的模板中的歡迎信息，如今就放在這個頁面頭部。運行結果以下圖：　　　　

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-Bootstrap 自用的，若是直接重定義可能會致使一些問題。例如，Bootstrap 所需的文件在styles 和scripts 塊中聲明。若是程序須要向已經有內容的塊中添加新內容，必須使用Jinja2 提供的super() 函數。例如，若是要在衍生模板中添加新的JavaScript 文件，須要這麼定義scripts 塊：

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