自定义base.html

最新推荐文章于 2024-10-12 09:14:11 发布

weixin_34096182

最新推荐文章于 2024-10-12 09:14:11 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：https://yq.aliyun.com/articles/650765

本文介绍如何基于Bootstrap框架自定义个人博客的基本模板，包括语言设置、标题、元信息、样式链接及导航栏等元素的设计。

然后根据上篇对bootsrap中base.html中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 %}
<!-- Fixed navbar -->
    <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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
        </ul>
        </div><!--/.nav-collapse -->
    </div>
    </nav>
    
{% 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 %}