Bootstrap的简洁、美观和易用可以让我们在前期不用花费太多的精力和CSS纠缠。

Flask-Bootstrap简化了集成Bootstrap的过程，而且提供了一些方便的工具。我们可以在模板里使用它提供的base.html来创建我们自己的基模板。

在我们的基模板开头引入Flask-Bootstrap提供的base.html，这会帮我们加载所有Bootstrap的资源：

{% extends "bootstrap/base.html" %}

除此之外，它提供的wtf.html模板里有帮助我们快速生成Bootstrap样式的表单函数（比如`quick_form()`）。如果你要考虑到IE9的兼容问题，可以引入它提供的fixes.html。

使用Flask-Bootstrap最常见的问题就是它的CDN问题。它默认使用cdnjs.cloudflare.com的Bootstrap资源，而国内访问速度很慢。

加载本地资源

我们可以通过简单的传入一个配置参数来使用本地的Bootstrap资源：

app = Flask(__name__)
app.config['BOOTSTRAP_SERVE_LOCAL'] = True

使用其他CDN

如果你想使用其他CDN资源，那么可以直接在Flask-Bootstrap的源码里修改，找到\venv\Lib\site-packages\flask_bootstrap\__init__.py，在文件末尾，将下面这些文件的地址修改成你想引用的CDN地址即可：

bootstrap = lwrap(
     WebCDN('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/' %
                   BOOTSTRAP_VERSION), local)

jquery = lwrap(
     WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %
                   JQUERY_VERSION), local)

html5shiv = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/html5shiv/%s/' %
                   HTML5SHIV_VERSION))

respondjs = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/respond.js/%s/' %
                   RESPONDJS_VERSION))

比如换成cdn.bootcss.com提供的资源：

bootstrap = lwrap(
    WebCDN('//cdn.bootcss.com/bootstrap/%s/' % BOOTSTRAP_VERSION), local)

jquery = lwrap(
    WebCDN('//cdn.bootcss.com/jquery/%s/' % JQUERY_VERSION), local)

html5shiv = lwrap(
    WebCDN('//cdn.bootcss.com/html5shiv/%s/' % HTML5SHIV_VERSION))

respondjs = lwrap(
    WebCDN('//cdn.bootcss.com/respond.js/%s/' % RESPONDJS_VERSION))

 

参考链接

Flask-Bootstrap源码：https://github.com/mbr/flask-bootstrap

Bootstrap源码：https://github.com/twbs/bootstrap

Flask-Bootstrap文档：http://pythonhosted.org/Flask-Bootstrap/

Flask-Bootstrap中文文档：http://flask-bootstrap-zh.readthedocs.io/zh/latest/

Bootstrap：http://getbootstrap.com/（官网） 或 Bootstrap中文网

（Flask-Bootstrap的中文文档是我业余时间翻译的，如果你发现错误，欢迎到Github上提交修改。项目地址： https://github.com/greyli/flask-bootstrap-docs-zh）

更多关于Flask的优质内容，欢迎关注Hello, Flask! – 知乎专栏。