使用Bootstrap-Flask在Flask項目中集成Bootstrap

時間 2019-11-15

標籤使用 bootstrap flask 項目集成欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap-Flask是一個簡化在Flask項目中集成前端開源框架 Bootstrap過程的Flask擴展。使用Bootstrap能夠快速的建立簡潔、美觀又功能全面的頁面，而Bootstrap-Flask讓這一過程更加簡單和高效。尤爲重要的是，Bootstrap-Flask支持最新版本的Bootstrap 4版本。

GitHub項目主頁： greyli/bootstrap-flask

和Flask-Bootstrap的區別

簡單來講，Bootstrap-Flask的出現是爲了替代不夠靈活且缺少維護的Flask-Bootstrap。它的主要設計參考了Flask-Bootstrap，其中渲染表單和分頁部件的宏基於Flask-Bootstrap中的相關代碼修改實現。和Flask-Bootstrap相比，前者有下面這些優勢：

去掉了內置的基模板，換來更大的靈活性，提供了資源引用代碼生成函數
支持Bootstrap 4
標準化的Jinja2語法
提供了更多方便的宏，好比簡單的分頁導航部件、導航連接等
宏的功能更加豐富，好比分頁導航支持傳入URL片斷
統一的宏命名，即「render_*」，更符合直覺

安裝與初始化

你若是使用過Flask-Bootstrap，那麼除了安裝時的名稱外，這個過程基本沒有不一樣。

安裝：

$ pip install bootstrap-flask複製代碼

初始化：

from flask_bootstrap import Bootstrap
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap(app)複製代碼

若是你使用工廠函數建立程序實例，那麼可使用下面的方式初始化擴展：

from flask_bootstrap import Bootstrap
from flask import Flask

bootstrap = Bootstrap()

def create_app():
    app = Flask(__name__)
    bootstrap.init_app(app)
    
    return app複製代碼

Bootstrap-Flask提供了哪些功能

2個資源加載函數

在簡單的示例程序中，或是在開發時，你可使用它提供的兩個快捷方法來生成Bootstrap資源引用代碼，以下所示：

<head>
{{ bootstrap.load_css() }}
</head>
<body>
...
{{ bootstrap.load_js() }}
</body>複製代碼

7個快捷渲染宏

目前，Bootstrap-Flask一共提供了7個宏，分別用來快捷渲染各種Bootstrap頁面組件，並提供了對擴展Flask-WTF、Flask-SQLAlchemy的支持。

使用方法至關簡單，以渲染Flask-WTF（WTForms）的表單類的render_form()宏爲例，你只須要從對應的模板路徑導入宏，而後調用便可並傳入必要的參數：

{% from 'bootstrap/form.html' import render_form %}

{{ render_form(form) }}複製代碼

你能夠在項目倉庫的examples目錄下找到一個完整的示例程序，示例程序的運行方式以下：

$ git clone https://github.com/greyli/bootstrap-flask.git
$ pip install flask flask-wtf flask-sqlalchemy bootstrap-flask
$ cd bootstrap-flask/examples
$ flask run複製代碼

如今訪問http://localhost:5000便可看到示例程序主頁。示例程序包含全部宏的實際調用示例，其中分頁宏示例頁面以下圖所示：