第44天：Flask 框架集成Bootstrap

時間 2021-04-10

標籤 css html python jquery git github 數據庫 npm flask bootstrap 欄目 Python 简体版

原文原文鏈接

前面學習了 Flask 框架的基本用法，以及模板引擎 Jinja2，按理說能夠開始本身的 Web 之旅了，不過在啓程以前，還有個重要的武器須要瞭解一下，就是著名的 Bootstrap 框架和 Flask 的結合，這將大大提升開發 Web 應用的效率。css

簡介

Bootstrap 是 Twitter 公司的設計師 Mark Otto 和 Jacob Thornton 開發的 Web 項目開發框架，簡潔、直觀、強悍，使得 Web 開發更加快捷，一經推出後頗受歡迎，一直是 GitHub 上的熱門開源項目，這麼好的開發框架 Flask 必定少不了。html

期初在 Flask 的擴展包中有 flask-bootstrap, 不事後來更新不多，後來 greyli 基於 flask-bootstrap 開發了 bootstrap-flask 擴展模塊，不經支持最新的 Bootstrap4，還基於 Jinjia2 模板引擎的宏，作了更多的擴展。值得一提的是 greyli 是個中國帥小夥，能在文章後面的參考連接中找到他。python

安裝

使用 pip 安裝：jquery

pip install bootstrap-flask

若是以前安裝過 flask-bootstrap, 須要將其卸載掉，否則二者會有衝突，若是您遇到錯誤提示: jinja2.exceptions.UndefinedError: 'bootstrap' is undefined，很大可能就是這個問題git

小試牛刀

導入模塊

建立一個 flaskbootstrap.py 程序文件，引入模塊 flask_bootstrap, 您沒看錯，引入的並非 bootstrap-flask：github

from flask_bootstrap import Bootstrap

注意：我在作示例時，將代碼文件名定義爲 flask_bootstrap.py, 運行時提示沒法導入 Bootstrap 模塊，這是由於文件名與模塊 flask_bootstrap 衝突了數據庫

而後對 Flask 應用初始化：npm

app = Flask(__name__) # 建立一個 Flask 應用bootstrap = Bootstrap(app) # 爲應用初始化 bootstrap

給應用加載 bootstrap 主要是給應用加上 Jinja2 的擴展，下面的工做就是寫模板文件。flask

建立基礎模板

bootstrap-flask 雖然基於 flask-bootstrap，可是卻沒有提供默認的模板文件，指望在後續版本中能有吧，不過本身寫也不麻煩，咱們在文件夾 templates 中建立一個 base.html，內容是：bootstrap

{% raw %}

<!-- 引入導航模塊的宏 render_nav_item -->{% from 'bootstrap/nav.html' import render_nav_item %}<!-- 下面是正常的 Bootstrap 頁面代碼，看起來很複雜，不過能夠從官網上拷貝 --><!DOCTYPE html><html>    <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>        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">            <div>                <a href="#">Python100</a>            </div>            <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent"                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">                <span></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>            {% 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>

{% endraw %}

是否是感受很頭大，不過是代碼多了些，結構很其實很簡單，大部分代碼是 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，代碼以下:

{% raw %}

{% extends "base.html" %} <!-- 繼承基礎模板 -->
{% block content %} <!-- 替換頁面內容 --><h1> Hello Flask Bootstrap </h1>{% endblock %}

{% endraw %}

是否是簡潔多了？下面在 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，標題

代碼示例:

{% raw %}

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

{% endraw %}

render_breadcrumb_item()

麪包屑導航條參數:

endpoint，路徑點，能夠直接寫視圖函數名
text，標題

代碼示例:

{% raw %}

{% from 'bootstrap/nav.html' import render_breadcrumb_item %}
<nav aria-label="breadcrumb">    <ol>        {{ render_breadcrumb_item('home', 'Home') }}        {{ render_breadcrumb_item('users', 'Users') }}        {{ render_breadcrumb_item('posts', 'Posts') }}        {{ render_breadcrumb_item('comments', 'Comments') }}    </ol></nav>

{% endraw %}

render_static()

靜態資源引用，例如引用 css 、js 或者圖標

參數:

type 資源類型，能夠是 css 或 js 或 icon
filename_or_url 資源路徑，文件名或者參數 local 爲 False 時的遠程 url
local 是否本地資源，默認爲 True

代碼示例:

{% raw %}

{% from 'bootstrap/utils.html' import render_static %}
{{ render_static('css', 'style.css') }}

{% endraw %}

其餘宏

還有有些宏頗有用，例如表單(form)相關的，還有分頁相關的，不過這些會涉及到其餘 Flask 擴展模塊，咱們會在介紹表單和 數據庫 的章節中作進一步學習，若是您有興趣，能夠瀏覽參考連接中的內容。

總結

這篇文章簡單介紹了 Flask 框架中如何使用 Bootstrap 擴展，從一個簡單的示例開始，講解了基於 Jinja2 模板引擎的 bootstrap-flask 模塊的使用，其中包括資源助手 bootstrap.load_css() 和 bootstrap.load_css() ，以及一些基本的宏的用法，在參考代碼中有較爲完整的例子，您能夠做爲參考。在後面的文章中將會陸續介紹表單和 數據庫 的使用，敬請期待。