新建公共模板: templates / base.html文章来源地址https://www.toymoban.com/news/detail-684101.html
(1). 继承bootstrap父级模板
{% extends "bootstrap/base.html" %}
(2). 标题
{% block title %}首页{% endblock %}
(3). css
{% block styles %}
{{ super() }}
<style>
body {
background-image: url("{{ url_for("static",filename="images/zc.png") }}")
}
#ccc {
margin-top: 60px;
}
#myfoot {
border-top: 1px solid darkgray;
font-size: 14px;
text-align: center;
color: lightgray;
}
.touxiang {
width: 20px;
height: 20px;
position: absolute;
border-radius: 50px;
}
</style>
{% endblock %}
(4). 导航栏
{% block navbar %}
<nav class="navbar navbar-inverse" id="ccc">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">个人博客</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span
class="sr-only">(current)</span></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 role="separator" class="divider"></li>
</ul>
</li>
<li><a href="#">我的相册</a></li>
<li><a href="#">留言板</a></li>
</ul>
<form class="navbar-form navbar-left" method="post" action="#">
<div class="form-group">
<input type="text" name="search_for" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<img class="touxiang" src="{{ url_for('static',filename='images/touxiang.jpg') }}" alt="头像">
</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</nav>
{% endblock %}
{% endblock %}
(5). 内容
{% block content %}
{% block newcontent %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
{% block footer %}
<p id="myfoot">这个是底部标签</p>
{% endblock %}
{% endblock %}
文章来源:https://www.toymoban.com/news/detail-684101.html
到了这里,关于32 - 个人博客项目-03-公共模板-base.html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!