32 - 个人博客项目-03-公共模板-base.html-Toy模板网

这篇具有很好参考价值的文章主要介绍了32 - 个人博客项目-03-公共模板-base.html。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

新建公共模板: 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 %}

到了这里，关于32 - 个人博客项目-03-公共模板-base.html的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！