bootstrap中有很多的block，block越多说明灵活性越高，那么含义如下：
{% block doc -%} ###doc：整个HTML文档（开始）
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>###html_attribs：<html>标签的属性
{%- block html %} ###html：<html>标签中的内容（开始）
<head>
{%- block head %} ###head：<head>标签中的内容（开始）
<title>{% block title %}{{title|default}}{% endblock title %}</title> ###title：<title>标签中的内容
{%- block metas %} ###metas：一组<meta>标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %} ##styles:层叠样式表定义
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %} ###head：<head>标签中的内容（结束）
</head> ###body_attribs:<body>标签的属性
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%} ###body：<body>标签中的内容（开始）
{% block navbar %} ###navbar:用户定义的导航条
{%- endblock navbar %}
{% block content -%} ###content：用户定义的页面内容
{%- endblock content %}
{% block scripts %} ###scripts：文档底部的JavaScript声明
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %} ###body：<body>标签中的内容（结束）
</body>
{%- endblock html %} ###html：<html>标签中的内容（结束）
</html>
{% endblock doc -%} ###doc：整个HTML文档（结束）
在我们的这个基模板中，block和endblock指令定义的块中的内容可以在其衍生模板中重新定义，添加到基模板中。
上表中的很多块都是Flask-Bootstrap自用的，如果直接重定义可能会导致一些问题。例如，Bootstrap所需的文件在style和scripts块中的声明。如果程序需要向已经有的内容的块中添加新内容，必须使用JinJia2提供的super（）函数。例如，如果要在衍生模板中添加新的JavaScript文件，需要这么定义scripts块：
{% block scripts %}
{{ super() }}
<scripts type="text/javascripts" src="my-scripts.js"></scripts>
{% endblock %}
然后根据上述block部分，自定义自己的基本模板
{% extends 'bootstrap/base.html' %}
{% block html_attribs %} lang="zh-CN" {% endblock %}
{% block title %}个人博客{% endblock %}
{% block meta %}
{{ super() }}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endblock %}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static',filename='css/customer.css') }}">
{% endblock %}
{% block body %}
{% block navbar %}
<ul class="nav nav-tabs" contenteditable="true">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资料</a></li>
<li class="disabled"><a href="#">信息</a></li>
<li class="dropdown pull-right"><a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 </a>
<ul class="dropdown-menu">
<li><a href="#">操作</a></li>
<li><a href="#">设置栏目</a></li>
<li><a href="#">更多设置</a></li>
<li class="divider"> </li>
<li><a href="#">分割线</a></li>
</ul>
</li>
</ul>
{% endblock %}
{% block content %}
{% block page_content %}{% endblock %}
{% endblock %}
{% block footer %}
<div class="mastfoot">
<div class="inner">
<a href='http://www.miitbeian.gov.cn/'>浙ICP备16013637号</a>
</div>
</div>
{% endblock %}
{% endblock %}
使用extends 引入bootstrap的base.html
{% block xxx %} 在base.html补充xxx部分{% endblock %}
其他部分属于前端网页设计部分，可去w3school补课
合理安排插入各个block和endblock块的效果如下（ps：组件插入插入到的是{% block navbar %}和{% endblock %}之间能用，但是插入交互组件会变形，还有下拉不能用，可能都与JavaScript脚本没有声明有关。）
————————————————
版权声明：本文为CSDN博主「GeekLeee」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/GeekLeee/article/details/52550630
