flask 的插件中有一個 flask-bootstrap 項目, 但是用起來不怎么方便, 如果大家感興趣的話, 還是直接在項目中引入 bootstrap.
flask 項目的目錄結(jié)構
項目名稱/
app/
static/ # 靜態(tài)文件夾
css/ # 項目中引入的 css 樣式表
js/ # 項目中引入的 js
fonts/ # 項目中需要的字體，一般是 bootstrap 所依賴的字體
images/ # 項目中的圖片文件夾
templates/ # html 模板文件夾
common/ # 通用打模板文件
...
views.py
__init__.py
env/ # python 虛擬環(huán)境
run.py # 啟動文件
引入 bootstrap
將 bootstrap 的 dist 文件夾下的 css，js恳邀，fonts 三個文件夾拷貝到項目的 static 文件夾下．在以后的學習過程中，你會發(fā)現(xiàn)，其實不需要完全拷貝的，你可以精簡一些無用的文件．
當然超升，由于 bootstrap 是基于 jquery 的，所以從網(wǎng)上下載 jquery.js 并拷貝至 js 文件夾下．具體下載的步驟哺徊，不再贅述．
制作基礎模板
在 templates/common 文件夾下建立一個 base.html 文件．內(nèi)容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="藕絲空間">
<meta name="author" content="東方鶚">
<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}"><!--引入項目的圖標室琢，將需要的 ico 文件放到 static/images 文件夾下．-->
<title>{% block title %}我的第一個前端頁面{% endblock %}</title>
<!--設置網(wǎng)頁的標題，通過這樣的設置唉工，你可以利用 jinja2 的一些特性研乒，將每個網(wǎng)頁的標題進行不通的設置．-->
{% block css %} <!--css模塊區(qū)域-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}">
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='css/offcanvas.css') }}" rel="stylesheet">
{% endblock %}
</head>
<body>
{% include "common/header.html" %}<!--引入網(wǎng)頁的頭部模板-->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
{% block content %}<!--自定義模板區(qū)域-->
{% endblock %}
{% include "common/sidebar.html" %}<!--引入網(wǎng)頁的側(cè)邊模板-->
</div><!--/row-->
{% include "common/footer.html" %}<!--引入網(wǎng)頁的底部模板-->
</div>
{% block js %}<!--js模塊區(qū)域-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/offcanvas.js') }}"></script>
{% endblock %}
</body>
</html>
此模板是基于 bootstrap 的項目實例－ offcanvas 制作的，你可以在 bootstrap 的源碼中找到該實例．
具體的解釋請看代碼的注釋部分．此時淋硝，你的基礎模板上是有錯誤存在的．因為還沒有制作頭部雹熬，底部和側(cè)邊模板．
制作頭部模板
頭部模板被放置在 templates/common 文件夾下，命名為 header.html．
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
制作底部模板
底部模板被放置在 templates/common 文件夾下谣膳，命名為 footer.html．
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
制作側(cè)邊模板
側(cè)邊模板被放置在 templates/common 文件夾下竿报，命名為 sidebar.html．
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">
<button type="button" class="btn btn-block btn-danger" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-block btn-info" aria-label="Left Align">
<span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-primary" aria-label="Left Align">
<span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-success" aria-label="Left Align">
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">
<button type="button" class="btn btn-block btn-warning" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/.sidebar-offcanvas-->
制作項目的主頁
現(xiàn)在需要在項目的主頁中引入基礎模板，然后自定義自己的部分模板即可．index.html 在 templats 文件夾下继谚，和頭部烈菌，底部和側(cè)邊模板不在一個目錄下，而在上級目錄里．
{% extends "common/base.html" %}<!--繼承基礎模板-->
{% block content %}<!--自定義模板區(qū)域-->
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
{% endblock %}
到此花履，模板部分已經(jīng)設置完畢．為了能夠看到和測試我們的勞動成果芽世，我們需要把 flask 項目寫完整．
完善項目并展示
__init__.py 代碼
from flask import Flask
app = Flask(__name__)
from app import views
views.py 代碼
from app import app
from flask import render_template
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
run.py
from app import app
app.run(debug=True)
至此，項目已經(jīng)能夠展示了．
展示
全屏展示
手機展示
點擊導航展示
進階
在模板中使用 jinja2 自定義的過濾器
首先自定義一個函數(shù)
def jfloat(s):
return float(s)
本函數(shù)是為了在模板中將字符串诡壁，整型等其它類型轉(zhuǎn)換為浮點型．
為了能夠在 jinja2 模板中使用該函數(shù)．需要在項目的根 __init__.py 文件里的工廠函數(shù) create_app() 中寫入如下代碼：
...
def create_app(config_name):
...
app.jinja_env.filters['jfloat'] = jfloat
這樣济瓢，你就可以在模板中使用該過濾器啦．
參考
http://docs.jinkan.org/docs/jinja2/api.html#writing-filters
http://www.tuicool.com/articles/7v6Ffiq
