Flask 项目中使用 bootstrap
flask 的插件中有一个 flask-bootstrap 项目, 但是用起来不怎么方便, 如果大家感兴趣的话, 还是直接在项目中引入 bootstrap.
flask 项目的目录结构
项目名称/
app/
static/ # 静态文件夹
css/ # 项目中引入的 css 样式表
js/ # 项目中引入的 js
fonts/ # 项目中需要的字体，一般是 bootstrap 所依赖的字体
images/ # 项目中的图片文件夹
templates/ # html 模板文件夹
common/ # 通用打模板文件
...
views.py
__init__.py
env/ # python 虚拟环境
run.py # 启动文件引入 bootstrap
下载 bootstrap
将 bootstrap 的 dist 文件夹下的 css，js，fonts 三个文件夹拷贝到项目的 static 文件夹下．在以后的学习过程中，你会发现，其实不需要完全拷贝的，你可以精简一些无用的文件．
当然，由于 bootstrap 是基于 jquery 的，所以从网上下载 jquery.js 并拷贝至 js 文件夹下．具体下载的步骤，不再赘述．
制作基础模板
在 templates/common 文件夹下建立一个 base.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">
<meta name="description" content="藕丝空间">
<meta name="author" content="东方鹗">
<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
<title>{% block title %}我的第一个前端页面{% endblock %}title>
{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}">
<link href="{{ url_for('static', filename='css/offcanvas.css') }}" rel="stylesheet">
{% endblock %}
head>
<body>
{% include "common/header.html" %}
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
{% block content %}
{% endblock %}
{% include "common/sidebar.html" %}
div>
{% include "common/footer.html" %}
div>
{% block js %}
<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 的源码中找到该实例．
具体的解释请看代码的注释部分．此时，你的基础模板上是有错误存在的．因为还没有制作头部，底部和侧边模板．
制作头部模板
头部模板被放置在 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 navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Project namea>
div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Homea>li>
<li><a href="#about">Abouta>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="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>li>
ul>
li>
ul>
div>
div>
nav>制作底部模板
底部模板被放置在 templates/common 文件夹下，命名为 footer.html．
<hr>
<footer>
<p>© 2016 Company, Inc.p>
footer>制作侧边模板
侧边模板被放置在 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">Linka>
<a href="#" class="list-group-item">Linka>
<a href="#" class="list-group-item">Linka>
<a href="#" class="list-group-item">Linka>
<a href="#" class="list-group-item">Linka>
div>
div>制作项目的主页
现在需要在项目的主页中引入基础模板，然后自定义自己的部分模板即可．index.html 在 templats 文件夹下，和头部，底部和侧边模板不在一个目录下，而在上级目录里．
{% extends "common/base.html" %}
{% block content %}
<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 navbutton>
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>Headingh2>
<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>
<div class="col-xs-6 col-lg-4">
<h2>Headingh2>
<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>
<div class="col-xs-6 col-lg-4">
<h2>Headingh2>
<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>
<div class="col-xs-6 col-lg-4">
<h2>Headingh2>
<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>
<div class="col-xs-6 col-lg-4">
<h2>Headingh2>
<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>
<div class="col-xs-6 col-lg-4">
<h2>Headingh2>
<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>
div>
div>
{% endblock %}到此，模板部分已经设置完毕．为了能够看到和测试我们的劳动成果，我们需要把 flask 项目写完整．
完善项目并展示
__init__.py 代码
from flask import Flask
app = Flask(__name__)
from app import viewsviews.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)至此，项目已经能够展示了．
展示
进阶
在模板中使用 jinja2 自定义的过滤器
首先自定义一个函数
def jfloat(s):
return float(s)本函数是为了在模板中将字符串，整型等其它类型转换为浮点型．
为了能够在 jinja2 模板中使用该函数．需要在项目的根 __init__.py 文件里的工厂函数 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
不同的蓝图中使用模板注意事项
http://www.os373.cn/article/58