django之组件

(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>








        

            posted on 
2019-02-27 22:05 
赤子之心心有所属 
阅读(115) 
评论(0) 
编辑 
收藏 
举报

        

    











    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





	






	
		
		

导航