Flask 项目中使用 bootstrap

flask 的插件中有一个 flask-bootstrap 项目, 但是用起来不怎么方便, 如果大家感兴趣的话, 还是直接在项目中引入 bootstrap.

flask 项目的目录结构

引入 bootstrap

下载 bootstrap

将 bootstrap 的 dist 文件夹下的 css，js，fonts 三个文件夹拷贝到项目的 static　文件夹下．在以后的学习过程中，你会发现，其实不需要完全拷贝的，你可以精简一些无用的文件．

当然，由于 bootstrap 是基于 jquery 的，所以从网上下载　jquery.js 并拷贝至 js　文件夹下．具体下载的步骤，不再赘述．

制作基础模板

在 templates/common 文件夹下建立一个 base.html 文件．内容如下：

此模板是基于 bootstrap 的项目实例－　offcanvas 制作的，你可以在 bootstrap 的源码中找到该实例．

具体的解释请看代码的注释部分．此时，你的基础模板上是有错误存在的．因为还没有制作头部，底部和侧边模板．

制作头部模板

头部模板被放置在　templates/common 文件夹下，命名为 header.html．

制作底部模板

底部模板被放置在　templates/common 文件夹下，命名为 footer.html．

制作侧边模板

侧边模板被放置在　templates/common 文件夹下，命名为 sidebar.html．

制作项目的主页

现在需要在项目的主页中引入基础模板，然后自定义自己的部分模板即可．index.html 在 templats 文件夹下，和头部，底部和侧边模板不在一个目录下，而在上级目录里．

到此，模板部分已经设置完毕．为了能够看到和测试我们的劳动成果，我们需要把 flask 项目写完整．

完善项目并展示

__init__.py 代码

views.py 代码

run.py

至此，项目已经能够展示了．

展示

进阶

在模板中使用 jinja2 自定义的过滤器

首先自定义一个函数

本函数是为了在模板中将字符串，整型等其它类型转换为浮点型．

为了能够在 jinja2 模板中使用该函数．需要在项目的根 __init__.py　文件里的工厂函数　create_app() 中写入如下代码：

这样，你就可以在模板中使用该过滤器啦．

参考

http://docs.jinkan.org/docs/jinja2/api.html#writing-filters

http://www.tuicool.com/articles/7v6Ffiq