1、下载bootstrap https://getbootstrap.com/docs/4.3/getting-started/download/
2、在项目目录下创建static文件夹，将下载的bootstrap解压到该static下
3、新建html，layout.html,url_for引用bootstrap.css
这里的block为定义模块
<!DOCTYPE html>
<title>{% block title %}{% endblock %} - 熊猫学猿</title>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
<section class="content">
<header>
{% block header %}{% endblock %}
</header>
{% block content %}{% endblock %}
</section>4、在index.html 使用 extends 引入layout.html,使用block替换layout的内容
<!DOCTYPE html>
{% extends 'layout.html' %}
{% block title %}首页{% endblock %}
{% block header %}
<a href="/">首页</a>->
{% endblock %}
{% block content %}
<ul class="row">
<li class="col-4">
<div class="row">
<h1>熊猫学猿1</h1>
</div>
</li>
<li class="col-4">
<div class="row">
<h1>熊猫学猿2</h1>
</div>
</li>
<li class="col-4">
<div class="row">
<h1>熊猫学猿3</h1>
</div>
</li>
</ul>
{% endblock %}5、在index.py中使用render_template，渲染页面
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
6、查看生成的页面源代码。使用Chrome浏览器，按【F12】打开【开发者工具】,index的block定义的内容，已经嵌入到layout的布局中
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
