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 %}