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的佈局中
