由于flask-bootstrap
的base.html
模板提供功能有限(文件位置:/site-packages/flask_bootstrap/templates/bootstrap/base.html
),比如我想在body中最后部分加上版权声明等。于是重新自定义一个Jinja2模板如下。
结构结果
代码
base.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}标题{% endblock %}</title>
<link rel="icon" href="{{url_for('static',filename='img/favicon.ico')}}"/>
<link rel="stylesheet" href="{{url_for('static',filename='bootstrap-3.3.7-dist/css/bootstrap.min.css')}}">
</head>
<body style="padding-top: 70px">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">展示平台</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">链接 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li role="separator" class="divider"></li>
{# <li class="dropdown-header">链接</li>#}
<li><a href="#">链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}{% endblock %}
<div id="footer" style="text-align: center">
© Copyright 2018 by lsh呵呵</a>.
</div>
<script src="{{url_for('static',filename='js/jquery-3.3.1.min.js')}}"></script>
<script src="{{url_for('static',filename='bootstrap-3.3.7-dist/js/bootstrap.min.js')}}"></script>
</body>
</html>
index.html:
{% extends
{% block
{{ super() }}<div class="container">
<div class="jumbotron">
<h2>项目介绍</h2>
<p>此处省略若干文字。</p>
<p>获取更多</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">我是链接</a>
</p>
</div>
</div>{% endblock