这是一个看脸的社会，没有漂亮的脸别人都懒得去了解你有趣的灵魂，所以网站得有一个漂亮的页面，对于初学者来说要手动写一个漂亮的页面需要学习的知识太多了，今天就介绍如何在Flask项目中使用Twitter开源的神器Bootstrap！

一、模板引擎

1.什么是模板？

在很多游乐园里面，有这样的镂空的人脸拍照KT板，这个板子就是模板，不同的小盆友站在后边就可以拍出不同的照片，我们的网页也是这样的，大多数页面都包含有相同的内容，只需要在要改变内容的位置留出几个空位，填入不同的内容就可以了，这个填入不同内容形成最终网页的过程就叫做渲染模板，这个工作就是由模板引擎完成的，Flask默认的模板引擎为Jinja2。

2.如何使用模板引擎？

之前我们一直都是在修改一个hello.py文件，现在项目中新建一个templates文件夹，因为Flask会在项目中templates文件夹中寻找模板文件，然后在其中新建一个user.html文件，内容为：

然后在hello.py中的user视图函数：

在Flask处理响应的文章中讲到了render_template函数，它接收的第一个位置参数就是模板html文件，后面接收的都是命名参数，可以传入多个。运行服务器，打开浏览器访问http://127.0.0.1:5000/user/judy

整个流程是这样的：

（1）变量

name在页面中是一个占位符，也被称为变量，显示的内容是render_tamplate函数传入的命名参数的内容，这个变量可以是列表、元组、字典、集合和对象。

user是一个对象，country是一个列表，count是一个元组，scores是一个字典，下面看看在模板中如何使用？

看看页面的显示效果：

在模板中对变量还可以使用过滤器，例如将首字母大写：

Jinja2提供了多种过滤器：

safe过滤器值得特别说明一下。默认情况下，出于安全考虑，Jinja2会转义所有变量。例如，如果一个变量的值为'Hello'，Jinja2会将其渲染成'

Hello'，浏览器能显示这个h1元素，但不会进行解释。很多情况下需要显示变量中存储的HTML代码，这时就可使用safe过滤器。千万别在不可信的值上使用safe过滤器，例如用户在表单中输入的文本。 （2）控制结构 判断 循环 （3）宏 可以把宏理解成一个函数，为了减少代码和方便使用： 新建一个宏 使用宏 重复使用宏 新建一个macros.html文件，把宏的内容放进去： 在user.html文件修改为： 来看看页面效果：

（4）块 我们可以将网页上不变的内容，例如导航栏、footer等等放入一个HTML文件中，然后给需要改变的位置预留几个空洞，这个空洞就是块，编写其他页面时直接包含这个基础文件，然后填入块的内容就可以了，省去了大量的重复劳动，例如新建一个base.html文件： 由{% block body %}和{% endblock %}就组成了一个body的块。修改index.html文件： extends表示从base.html这个模板衍生出来的，super表示继承原先的内容。将视图函数index修改为： 访问一下首页http://127.0.0.1:5000/看看效果 在base中的title就被继承下来了。学会了继承模板，下面就可以开始使用bootstrap了。 二、使用bootstrap 1.安装flask-bootstrap $ pip install flask-bootstrap 2.在hello.py添加如下代码，引入模块和初始化 from flask_bootstrap import Bootstrap bootstrap = Bootstrap(app) 3.修改base.html

4.修改index.html 5.访问首页看看：

一个带有导航栏的页面出现了，bootstrap是基于响应式布局的，也就是页面的大小不同时，显示的方式不同，这就解决了很多网页无法适应手机浏览器的问题。 我们同样可以修改user.html文件。

看看最终效果：

如果觉得有用请转发朋友圈或发给你的朋友。