(Django)
组件:本质上就是将一个写好的功能模块的html文件直接引入html目标文件,利用其功能.
标准语法:
{% include 'html文件名' %}
如:{% include 'navbar.html' %} 可以放在任何先要放的位置
实例:
导航功能组件代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
{# <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">#}
<style>
.c1{
background-color: blue;
height: 38px;
}
}
</style>
</head>
<body>
<div>
<div class="c1">
<a href="" class="c2">qq</a>
<a href="">message</a>
</div>
</div>
{#<script src="jquery-3.2.1.min.js"></script>#}
{#<script src="bootstrap/js/bootstrap.min.js"></script>#}
</body>
</html>
目标文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
{# <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">#}
</head>
<body>
{% include 'zu.html' %}
<ur>
<li>1</li>
<li>2</li>
<li>3</li>
</ur>
{#<script src="jquery-3.2.1.min.js"></script>#}
{#<script src="bootstrap/js/bootstrap.min.js"></script>#}
</body>
</html>