首页 > 其他分享 >flask的自定义bootstrap模板

flask的自定义bootstrap模板

时间:2022-10-27 13:37:50浏览次数:43  
标签:自定义 flask bootstrap html base 链接 endblock


由于​​flask-bootstrap​​​的​​base.html​​​模板提供功能有限(文件位置:​​/site-packages/flask_bootstrap/templates/bootstrap/base.html​​),比如我想在body中最后部分加上版权声明等。于是重新自定义一个Jinja2模板如下。

结构结果

flask的自定义bootstrap模板_bootstrap

flask的自定义bootstrap模板_ico_02

代码

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


标签:自定义,flask,bootstrap,html,base,链接,endblock
From: https://blog.51cto.com/u_15847885/5800881

相关文章