Django项目 组件的使用

当其他页面想要使用一个页面的一部分时，可以将这一部分设置为一个组件，然后其他页面来调用

组件介绍：每个页面都会用到导航条信息，所以我将导航条设置为一个组件   代码存放在daohangtiao.html中

示例： 

<nav class="navbar navbar-inverse">
    <!-- bootstrap框架  container 左右两边会有一个15px的padding（内边距）container-fluid 没有内边距 不管屏幕大小 都是100% -->
    <div class="container-fluid">
        <!--        这是品牌图标的设置开始-->
        <div class="navbar-header">
            <img id="imgs1"  style="width: 50px;height: 50px"
                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F21%2F20210721122539_af638.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651157116&t=a7efb24de09f659364a478d7754d9714">
            <span>图书管理系统</span>
        </div>
        <!--品牌图标设置结束-->
        <!-- 这是导航栏其他标题设置的开始 -->
        <!-- collapse 这是设置在视口大于768px时才显示-->
        <!--        navbar-collapse  小于768px时 折叠的div元素会以列表的形式显示-->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--            navber-nav 设置ul为导航条件组件内的列表元素-->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">实时监控<span class="sr-only">(current)</span></a></li>
                <li><a href="#">数据分析</a></li>
                <li><a href="#">日常管理</a></li>
                <li><a href="#">基础设置</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <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><a href="#">新东方图书馆</a></li>
                        <li><a href="#">朝阳图书馆</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">延庆图书馆</a></li>
                    </ul>
                <li><a href="#">用户名</a></li>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
其他页面调用这个组件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" CONTENT="text/html" charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>添加书籍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/fontawesome/css/fontawesome.min.css" rel="stylesheet">
    <style>
    </style>
</head>
<body>
{#将导航栏导入#}
{% include "daohangtiao.html" %}
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" >
            <div class="panel panel-primary">
                <div class="panel-heading">添加书籍</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/add_booklist/"method="post">
                        <div class="form-group">
                            <label for="book_name" class="col-sm-2 control-label">书名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="book_name" placeholder="书名"
                                       name="book_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="book_type" class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="book_type" placeholder="类型"
                                       name="book_type">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publisher" class="col-sm-2 control-label">出版社</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="publisher">
                                    {% for publisher in pub_list %}
                                        <option value="{{ publisher.id }}">{{ publisher.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


</body>
</html>


posted @ 2022-04-02 23:14  张丶先森  阅读(68)  评论(0)    收藏  举报