前面學習了 Flask 框架的基本用法，以及模板引擎 Jinja2，按理說可以開始自己的 Web 之旅了，不過在啟程之前，還有個重要的武器需要了解一下，就是著名的 Bootstrap 框架和 Flask 的結合，這將大大提高開發 Web 應用的效率。
簡介
Bootstrap 是 Twitter 公司的設計師 Mark Otto 和 Jacob Thornton 開發的 Web 項目開發框架，簡潔、直觀、強悍，使得 Web 開發更加快捷，一經推出后頗受歡迎，一直是 GitHub 上的熱門開源項目，這么好的開發框架 Flask 一定少不了。
期初在 Flask 的擴展包中有 flask-bootstrap, 不過后來更新很少，后來 greyli 基于 flask-bootstrap 開發了 bootstrap-flask 擴展模塊，不經支持最新的 Bootstrap4， 還基于 Jinjia2 模板引擎的宏，做了更多的擴展。值得一提的是 greyli 是個中國帥小伙，能在文章后面的參考鏈接中找到他。
安裝
使用 pip 安裝：
pip install bootstrap-flask如果之前安裝過?
flask-bootstrap, 需要將其卸載掉，不然兩者會有沖突，如果您遇到錯誤提示:?jinja2.exceptions.UndefinedError: 'bootstrap' is undefined，很大可能就是這個問題
小試牛刀
導入模塊
創建一個?flaskbootstrap.py?程序文件，引入模塊?flask_bootstrap, 您沒看錯，引入的并不是?bootstrap-flask：
from flask_bootstrap import Bootstrap注意：我在做示例時，將代碼文件名定義為?
flask_bootstrap.py, 運行時提示 無法導入 Bootstrap 模塊，這是因為文件名與模塊?flask_bootstrap?沖突了
然后對 Flask 應用初始化：
app = Flask(__name__) # 創建一個 Flask 應用bootstrap = Bootstrap(app) # 為應用初始化 bootstrap
給應用加載 bootstrap 主要是給應用加上 Jinja2 的擴展，下面的工作就是寫模板文件。
創建基礎模板
bootstrap-flask?雖然基于?flask-bootstrap，但是卻沒有提供默認的模板文件，期望在后續版本中能有吧，不過自己寫也不麻煩，我們在文件夾 templates 中創建一個 base.html，內容是：
<!-- 引入導航模塊的宏 render_nav_item -->{% from 'bootstrap/nav.html' import render_nav_item %}<!-- 下面是正常的 Bootstrap 頁面代碼，看起來很復雜，不過可以從官網上拷貝 --><!DOCTYPE html><html lang="cn"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>{% block title %} Flask Bootstrap {% endblock %}</title> <!-- 定義標題塊 --><link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">{{ bootstrap.load_css() }} <!-- 動態加載 Bootstrap 樣式 --></head><body><main class="container"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="navbar-header"><a class="navbar-brand" href="#">Python100</a></div><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><!-- 利用宏 render_nav_item 創建菜單 -->{{ render_nav_item('index', '首頁', use_li=True) }}</ul></div></nav>{% block content %} <!-- 定義內容塊 --><h1> Hello Flask Bootstrap! </h1>{% endblock %}<footer class="text-center">{% block footer %} <!-- 定義頁腳塊 --><small> ? 2019 <a href="http://justdopython.com" title="python 100天">Python 技術</a></small>{% endblock %}</footer></main><!-- 動態加載 Bootstrap js 腳本 -->{{ bootstrap.load_js() }}</body></html>
是不是感覺很頭大，不過是代碼多了些，結構很其實很簡單，大部分代碼是 Bootstrap 提供的基本框架代碼，然后加入了一些?bootstrap-flask?的擴展。我們來分析一下：
-
首先引入導航元素宏?
render_nav_item，因為在后面制作導航菜單時要用 -
然后是大段的 Bootstrap 框架代碼
-
定義塊，用來在繼承 base.html 的子模板中做替換，其中有 標題、內容和頁尾
-
動態加載 Bootstrap 樣式和腳本，通過?
bootstrap.load_css()?和?bootstrap.load_js() -
在導航菜單的位置，使用宏?
render_nav_item?創建一個首頁菜單
這樣就完成基礎模板的定義，稍后會對?render_nav_item、bootstrap.load_css()和?bootstrap.load_js()?做解釋。
創建頁面模板
有了基礎模板，就可以做具體的頁面模板了，先做首頁 index.html，代碼如下:
{% extends "base.html" %} <!-- 繼承基礎模板 -->{% block content %} <!-- 替換頁面內容 --><h1> Hello Flask Bootstrap </h1>{% endblock %}
是不是簡潔多了？下面在?flaskbootstrap.py?中加上首頁的視圖函數:???????
@app.route('/')def index():return render_template('index.html')
啟動
如果一切順利，訪問?localhost:5000?就能看到如下效果:
首頁效果
調整瀏覽器頁面大小，可以看到頁面自適應效果，是不是很神奇。接下來詳細說明一下?bootstrap-flask?模塊
資源助手
在小試牛刀中，能看到對 Bootstrap 樣式和腳本引用的方法?bootstrap.load_css()和?bootstrap.load_js()，默認情況下會自動從 Bootstrap 的 CDN 上引用最新版的 Bootstrap 資源，例如:?https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css，這樣就方便了開發者對 Bootstrap 資源的引用和升級。
使用本地資源
如果想要從其他位置或者本地引用資源，只要在給應用初始化完 Bootstrap 之后，將應用的?BOOTSTRAP_SERVE_LOCAL?屬性設置為?True?就好了:???????
app = Flask(__name__) # 創建一個 Flask 應用bootstrap = Bootstrap(app) # 為應用初始化 bootstrapapp.config['BOOTSTRAP_SERVE_LOCAL'] = True # 設置為使用本地資源
本地資源放在?static?目錄下(這個目錄是 Flask 框架默認的靜態資源目錄)，Bootstrap 本地資源放置如下:
Bootstrap 資源
bootstrap.load_css()
加載 Bootstrap 樣式資源， 參數:
-
version，指定 Bootstrap 樣式版本號，默認值為 4.3.1，本地資源無效
bootstrap.load_js()
加載 Bootstrap 腳本資源
參數：
-
version，指定 Bootstrap 腳本版本號，默認為 4.3.1，本地資源無效 -
jquery_version，指定 JQuery 版本號，默認為 3.3.1，本地資源無效 -
popper_version，指定 Popper 版本號，默認為 1.14.0，本地資源無效 -
with_jquery，是否加載 JQuery， 默認為?True -
with_popper，是否加載 Popper, 默認為?True
宏
bootstrap-flask?主要的改進是加入了很多方法是用的宏，讓對頁面效果的編輯像寫邏輯代碼一樣，并在宏中還對所處環境信息進行了判斷，比如菜單是否要激活，分頁控件動態效果等等，下面介紹幾個典型的宏
render_nav_item()
生成一個導航菜單
參數:
-
endpoint，路徑點，可以直接寫視圖函數名
-
text，標題
代碼示例:
{% from 'bootstrap/nav.html' import render_nav_item %}<nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="navbar-nav mr-auto">{{ render_nav_item('index', 'Home') }}{{ render_nav_item('explore', 'Explore') }}{{ render_nav_item('about', 'About') }}</div></nav>
render_breadcrumb_item()
面包屑導航條 參數:
-
endpoint，路徑點，可以直接寫視圖函數名
-
text，標題
代碼示例:
{% from 'bootstrap/nav.html' import render_breadcrumb_item %}<nav aria-label="breadcrumb"><ol class="breadcrumb">{{ render_breadcrumb_item('home', 'Home') }}{{ render_breadcrumb_item('users', 'Users') }}{{ render_breadcrumb_item('posts', 'Posts') }}{{ render_breadcrumb_item('comments', 'Comments') }}</ol></nav>
render_static()
靜態資源引用，例如引用 css 、js 或者 圖標
參數:
-
type 資源類型，可以是 css 或 js 或 icon
-
filename_or_url 資源路徑，文件名 或者 參數?
local?為?False?時的遠程 url -
local 是否本地資源，默認為?
True
代碼示例:
{% from 'bootstrap/utils.html' import render_static %}{{ render_static('css', 'style.css') }}
其他宏
還有有些宏很有用，例如 表單(form)相關的，還有分頁相關的，不過這些會涉及到其他 Flask 擴展模塊，我們會在介紹?表單?和?數據庫?的章節中做進一步學習，如果您有興趣，可以瀏覽參考鏈接中的內容。
總結
這篇文章簡單介紹了 Flask 框架中如何使用 Bootstrap 擴展，從一個簡單的示例開始，講解了基于 Jinja2 模板引擎的?bootstrap-flask?模塊的使用，其中包括資源助手?bootstrap.load_css()?和?bootstrap.load_css()?，以及一些基本的宏的用法，在參考代碼中有較為完整的例子，您可以作為參考。在后面的文章中將會陸續介紹?表單?和?數據庫?的使用，敬請期待。
