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 模組定義的可用塊。

注意：上表中很多塊都是 Flask-Bootstap 自用的， 如果直接重定義可能會導致一些問題。如果程式需要向已經有內容的塊中新增新內容， 必須使用 Jinja2 提供的 super() 函式。例如，如果要在衍生模版中新增新的 JavaScript 檔案，需要這麼定義：

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