Flask+Bootstrap实战一

项目教程地址：

Youtobe源地址:Bootstrap Flask
Bilibili搬运:哔哩哔哩

---

新建一个HELLO WORLD

from flask import Flask

app = Flask(name)

@app.route('/')
def index():
return "hello world"

if name == 'main':
app.run(debug=True)

使用render_template

使用render_template的作用就是路由函数一次性返回过大的模块，而在templates文件夹下进行操作

hello world

运行结果如下

在index.html中传参数是通过这种方式进行的<p>{{title}}</p>

利用if和循环语句控制templates渲染

html中的if语句可以着么写

{% if title %}

{% else %}

{% endif %}

如果是要写一个for循环的话

这里注意，如果是写成{}花括号，在模板进行渲染的时候顺序就会变乱

paragraphs = [
"section 1",
"section 2",
"section 3"
]
return render_template("index.html", data = paragraphs)

index模板如下

hello world

{% for i in data %}

{{ i }}

{% endfor %}

模板的继承和引用

模板继承

在网页的设计开发中，往往是好多个页面共用某些个元素，但是没有必要把他们都copy，所以这时候就需要用到模板的继承了，这里也是分了父模板和子模板。

父模板往往用base.html来表示，子模版这里还是用index.html。模板的继承部分用extends关键字表示，还可以用block进行具体的修改，下面是在父模板中的部分

Flask App

---

{% block content %}
{% endblock %}

在子模板中，写成这样，将原先的title文字渲染出来，注意这里是endblock中间没有空格

{% extends "base.html" %}
{% block content %}

{{ title }}

最后的显示结果如下

模板引用

这个就是比如一个模块需要很多次引用，就可以给他单独新建一个html文件，然后使用include关键字进行引用

这里新建一个navbar.html文件，之后原先在这里的内容更换一下

{% include "navbar.html" %}
{% block content %}
{% endblock %}

就可以单独在navbar.html文件当中进行修改了

利用Flaks-bootstrap来优化布局

需要pip安装flask-bootstrap，因为它不支持bootstrap4，所以在用的都是bootstrap3。

1. Flask-Bootstrap的教程文档

2. Bootstrap的组件库

---

如何使用flask-bootstrap的组件库

首先，导入官方文档的实例程序，修改我们的base.html文件

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

{% block navbar %}

{% block content %}

Hello, Bootstrap

我们把navbar部分的程序修改为include自己的navbar.html即可

之后，我们修改index.html文件

{% extends "base.html" %}
{% block content %}

Hello Flask-Bootstrap

对于navbar.html文件也可以进行适当的修改