標籤：style http io os 使用 ar java strong sp
這部分還是屬於模板，講Flask裡嵌入Bootstrap，利用Flask-Bootstrap外掛程式。這個外掛程式存在的意義就是簡化這個嵌入的操作過程，當然不用也可以。
通過Flask-Bootstrap整合BootstrapBootstrap的介紹就不翻了。
Bootstrap作為一個client端的架構，他最終存在於HTML檔案中，做Flask應用開發的話，應該把它放入模板中。
Flask-Bootstrap外掛程式可以簡化這個整合操作，用pip安裝：
$ pip install flask-bootstrap
Flask外掛程式一般與Flask app執行個體一同初始化，如：
`hello.py`from flask.ext.bootstrap import Bootstrap# ...bootstrap = Bootstrap(app)
還是之前的hello.py，又增加了Flask-Bootstrap。類似於Flask-Script，外掛程式由flask.ext控制項引入，通過向構造器傳入app執行個體來初始化並得到這個外掛程式的執行個體。
Flask-Bootstrap初始化完成後，就得到一個包含了所有Bootstrap需要檔案的基礎模板。這個模板利用了Jinja2的繼承機制，應用只需要繼承這個模板，就得到了已經整合了Bootstrap的新模板。修改之前的user.html：
user.html
{% 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 %}
上面的模板，繼承了由Flask-Bootstrap提供的bootstrap/base.html基礎模板。這個基礎模板包含了一個網頁的骨架，同時已經包含了Bootstrap的CSS和JS檔案。
基礎模板中定義的區塊，可以被繼承的模板裡定義的區塊覆蓋。在block與endblock之間的內容會被填充到基礎模板中。
新的user.html裡有title，navbar和content三個區塊，在navbar裡，利用Bootstrap組件定義了簡單的導航條。
註：
\site-packages\flask_bootstrap\templates\bootstrap內。新的網頁效果:
Flask-Bootstrap的基礎模板裡提供多種區塊：
名稱 描述doc 全部HTML文檔html_attribs <html> tag 內部的屬性html <html> tag 中間的內容head <head> tag 中間的內容title <title> tag 中間的內容metas <meta> tags的一個列表styles CSSbody_attribs <body> tag 內部的屬性body <body> tag 中間的內容navbar 自訂導覽列content 自訂頁面內容scripts 檔案底部的JavaScript聲明
上表中的一些區塊Flask-Script本身也有使用，直接覆蓋可能導致問題，比如styles和scripts區塊裡就聲明了一些Bootstrap檔案。建議直接看看基礎模板的內容，有個瞭解。如果只是需要增加自己的內容，那麼可以使用Jinja2提供的super()方法，可以保留原有內容。例如：
{% block scripts %}{{ super() }}<script type="text/javascript" src="my-script.js"></script> {% endblock %}
註：模板這可能還需要1~2個，才能搞定。
FlaskWebDevelopment - Flask模板2 - Flask-Bootstrap外掛程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
