Bootstarp 套用模板

bootstrap导入静态资源

STATICFILES = (...) # setings.py 文件里

在template里面开头使用
{% load staticfiles %}

{% static '路径' %} # 导入拼接

bootstarp/mian,html

{% load staticfiles %}
<!DOCTYPE HTML>
<html>

<head> <title>CMDB</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="{% static 'css/bootstrap.min.css'%}" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="{% static 'css/style.css'%}" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="{% static 'css/morris.css'%}" type="text/css"/> <!-- Graph CSS --> <link href="{% static 'css/font-awesome.css'%}" rel="stylesheet"> <!-- jQuery --> <script src="{% static 'js/jquery-2.1.4.min.js'%}"></script> <!-- //jQuery --> <!-- tables --> <link rel="stylesheet" type="text/css" href="{% static 'css/table-style.css'%}" /> <link rel="stylesheet" type="text/css" href="{% static 'css/basictable.css'%}" /> <script type="text/javascript" src="{% static 'js/jquery.basictable.min.js'%}"></script> <script type="text/javascript"> $(document).ready(function() { $('#table').basictable(); $('#table-breakpoint').basictable({ breakpoint: 768 }); $('#table-swap-axis').basictable({ swapAxis: true }); $('#table-force-off').basictable({ forceResponsive: false }); $('#table-no-resize').basictable({ noResize: true }); $('#table-two-axis').basictable(); $('#table-max-height').basictable({ tableWrapper: true }); }); </script> <!-- //tables --> <link href='http://fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <!-- lined-icons --> <link rel="stylesheet" href="{% static 'css/icon-font.min.css'%}" type='text/css' /> <!-- //lined-icons --> # 弹窗 {#<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">#} {#<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>#} {#<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>#} </head> <body> <div class="page-container sidebar-collapsed"> <!--/content-inner--> <div class="left-content"> <div class="mother-grid-inner"> <!--header start here--> <div class="header-main"> <div class="logo-w3-agile"> <h1><a href="/index/">主页</a></h1> </div> <div class="w3layouts-left"> <!--search-box--> <div class="w3-search-box"> <form action="#" method="post"> <input type="text" placeholder="Search..." required=""> <input type="submit" value=""> </form> </div><!--//end-search-box--> <div class="clearfix"> </div> </div> <div class="w3layouts-right"> <div class="profile_details_left"><!--notifications of menu start --> <ul class="nofitications-dropdown"> <li class="dropdown head-dpdn disabled"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">0</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>None</h3> </div> </li> <li> <div class="notification_bottom"> <a href="#">See all messages</a> </div> </li> </ul> </li> <li class="dropdown head-dpdn disabled"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">0</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>None</h3> </div> <div class="notification_bottom"> <a href="#">See all notifications</a> </div> </li> </ul> </li> <li class="dropdown head-dpdn disabled"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">0</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>None</h3> </div> </li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Database update</span><span class="percentage">40%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar yellow" style="width:40%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Dashboard done</span><span class="percentage">90%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar green" style="width:90%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Mobile App</span><span class="percentage">33%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar red" style="width: 33%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Issues fixed</span><span class="percentage">80%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar blue" style="width: 80%;"></div> </div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all pending tasks</a> </div> </li> </ul> </li> <div class="clearfix"> </div> </ul> <div class="clearfix"> </div> </div> <!--notification menu end --> <div class="clearfix"> </div> </div> <div class="profile_details w3l"> <ul> <li class="dropdown profile_details_drop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <div class="profile_img"> <span class="prfil-img"><img src="{% static '' %}{{ img }}" alt=""> </span> <div class="user-name"> <p>{{ userinfo }}</p> <span>{{ pos }}</span> </div> <i class="fa fa-angle-down"></i> <i class="fa fa-angle-up"></i> <div class="clearfix"></div> </div> </a> <ul class="dropdown-menu drp-mnu"> <li> <a href="#"><i class="fa fa-user"></i> 用户信息</a> </li> <li> <a href="/delete_session/"><i class="fa fa-sign-out"></i> 退出登录</a> </li> </ul> </li> </ul> </div> <div class="clearfix"> </div> </div> <!--heder end here--> <div class="agile-grids"> <div class="agile-tables"> <!-- tables --> {# 表单继承 分页继承 #} {% block tables %} {% endblock %} </div> </div> <!-- //tables --> {% block form %} {% endblock %} <!-- script-for sticky-nav --> <script> $(document).ready(function() { var navoffeset=$(".header-main").offset().top; $(window).scroll(function(){ var scrollpos=$(window).scrollTop(); if(scrollpos >=navoffeset){ $(".header-main").addClass("fixed"); }else{ $(".header-main").removeClass("fixed"); } }); }); </script> <!-- /script-for sticky-nav --> <!--inner block start here--> <div class="inner-block"> </div> <!--inner block end here--> <!--copy rights start here--> <!--COPY rights end here--> </div> </div> <!--//content-inner--> <!--/sidebar-menu--> {# 菜单继承 #} <div class="sidebar-menu"> <header class="logo1"> <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> </header> <div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div> <div class="menu" id='auth_index'> <ul id="menu" > <li><a href="/host/add/"><i class="fa fa-table"></i> <span>表单</span><div class="clearfix"></div></a></li> {% for i in menu_dict.values %} <li><a href="#"><i class="fa fa-list-ul "></i><span>{{i.title}}</span> <span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div></a> <ul> {% for ii in i.lower %} <li><a href="{{ii.url}}">{{ii.name}}</a></li> {% endfor %} </ul> </li> {% endfor %} </ul> </div> </div> <div class="clearfix"></div> </div> {# 菜单栏 样式的 js脚本#} <script>var toggle = false; $(".sidebar-icon").click(function() { if (toggle) { $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back"); $("#menu span").css({"position":"absolute"}); } else { $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back"); setTimeout(function() { $("#menu span").css({"position":"relative"}); }, 400); } toggle = !toggle; }); </script> <!--js --> <script src="{% static 'js/jquery.nicescroll.js'%}"></script> <script src="{% static 'js/scripts.js'%}"></script> <!-- Bootstrap Core JavaScript --> <script src="{% static 'js/bootstrap.min.js'%}"></script> <!-- /Bootstrap Core JavaScript --> </body> </html>

继承mian.html 模板
LIAS

{% extends 'bootstarp/main.html' %}
{% block tables %}
<h3>主机列表</h3>

    <div > {% if '/host/add/' in request.permission_code_list %} <a href="/host/add/"> <button type="button" class="btn btn-success">添加主机</button> </a> <a href="/reload_hosts/"><button type="button" class="btn btn-info"> 一键获取数据 </button></a> {% endif %} </div> <div class="w3l-table-info"> <table id="table"> <thead> <tr> <th>ID</th> <th>主机名</th> <th>实例名</th> <th>CPU</th> <th>内存/G</th> <th>带宽/M</th> <th> 登录端口 </th> <th> 公网IP </th> <th> 主机状态 </th> <th> 内核版本 </th> <th> 操作系统 </th> <th> 来源IP </th> <th>地区</th> {% if '/host/update/(\d+)/' in request.permission_code_list %} <th>编辑</th> {% endif %} {% if '/host/delete/(\d+)/' in request.permission_code_list %} <th>删除</th> {% endif %} </tr> </thead> <tbody> {% for host in hosts_page %} <tr> <td>{{ host.id }}</td> <td>{{ host }}</td> <td> {{ host.ecsname }} </td> <td> {{ host.cpu }} </td> <td> {{ host.mem }} </td> <td> {{ host.speed }} </td> <td> {{ host.login_port }} </td> <td> {{ host.eth1_network }} </td> <td> {{ host.get_state_display }} </td> <td> {{ host.kernel }} </td> <td> {{ host.os }} </td> <td> {{ host.source }} </td> <td>{{ host.region }}</td> {% if '/host/update/(\d+)/' in request.permission_code_list %} <td><a href="/host/edit/{{ host.id }}"> <button type="button" class="btn btn-warning " >编辑</button> </a></td> {% endif %} {% if '/host/delete/(\d+)/' in request.permission_code_list %} <td><button type="button" class="btn btn-danger " data-toggle="modal" data-target="#deleteModal" >删除</button> <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button> <h4 class="modal-title" id="myModalLabel"> 请确认是否删除 </h4> </div> <div class="modal-body"> <input type="hidden" id="id" name="id" value=""> 是否删除 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-danger" >确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </td> {% endif %} </tr> {% endfor %} </tbody> </table> </div> <div class="left-content row"> <div class=" col-md-8 col-md-offset-8"> <nav aria-label="..."> <ul class="pagination pagination pagination-lg"> {% if hosts_page.has_previous %} <li ><a href="/host/list/?page={{hosts_page.previous_page_number}}" aria-label="Previous"><span aria-hidden="true">«</span></a></li> {% else %} <li class="disabled"><a ><span aria-hidden="true">«</span></a></li> {% endif %} {% for num in p.page_range %} {% if hosts_page.number == num %} <li class="active"><a href="/host/list/?page={{ num }}"> {{ num }} </a></li> {% else %} <li ><a href="/host/list/?page={{ num }}">{{ num }} </a></li> {% endif %} {% endfor %} {% if hosts_page.has_next %} <li ><a href="/host/list/?page={{ hosts_page.next_page_number }}" aria-label="Next"><span aria-hidden="true">»</span></a></li> {% else %} <li class="disabled"><a ><span aria-hidden="true">»</span></a></li> {% endif %} </ul> </nav> </div> </div> {% endblock %}

继承 mian.html 模板
ADD

{% extends 'bootstarp/main.html' %}
{% block form %}
<br>

  <div class="grid-form1"> <h3>添加主机数据</h3> <div class="tab-content"> <div class="tab-pane active" id="horizontal-form"> <form class="form-horizontal" method='post' role='form' novalidate> {% csrf_token %} <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label">主机名</label> <div class="col-sm-8" id="hostname"> {{ form.hostname }} {{ form.errors.hostname.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label">实例名</label> <div class="col-sm-8" id="ecsname"> {{ form.ecsname }} {{ form.errors.ecsname.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 登录端口 </label> <div class="col-sm-8" id="login_port"> {{ form.login_port }} {{ form.errors.login_port.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> CPU </label> <div class="col-sm-8" id="cpu"> {{ form.cpu }} {{ form.errors.cpu.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 内存/G </label> <div class="col-sm-8" id="mem"> {{ form.mem }} {{ form.errors.mem.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 带宽/M </label> <div class="col-sm-8" id="speed" > {{ form.speed }} {{ form.errors.speed.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 公网IP </label> <div class="col-sm-8" id="eth1_network" > {{ form.eth1_network }} {{ form.errors.eth1_network.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 私网IP </label> <div class="col-sm-8" id="eth0_network"> {{ form.eth0_network }} {{ form.errors.eth0_network.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> SN </label> <div class="col-sm-8" id="sn"> {{ form.sn }} {{ form.errors.sn.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 内核 </label> <div class="col-sm-8" id="kernel" > {{ form.kernel }} {{ form.errors.kernel.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 备注 </label> <div class="col-sm-8" id="remarks"> {{ form.remarks }} {{ form.errors.remarks.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 创建时间 </label> <div class="col-sm-8" id="createtime"> {{ form.createtime }} {{ form.errors.createtime.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 到期时间 </label> <div class="col-sm-8" id="expirytime"> {{ form.expirytime }} {{ form.errors.expirytime.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 主机状态 </label> <div class="col-sm-8" id="state"> {{ form.state }} {{ form.errors.state.0 }} {{ message }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 标签 </label> <div class="col-sm-8" id="lab"> {{ form.lab_id }} {{ form.errors.lab_id.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 操作系统 </label> <div class="col-sm-8" id="os"> {{ form.os_id }} {{ form.errors.os_id.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 来源类型 </label> <div class="col-sm-8" id="source" > {{ form.source_id }} {{ form.errors.source_id.0 }} </div> </div> <div class="form-group"> <label for="focusedinput" class="col-sm-2 control-label"> 所属区域 </label> <div class="col-sm-8" id="region"> {{ form.region_id }} {{ form.errors.region_id.0 }} </div> </div> <div class="panel-footer"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <input type="submit" class="btn-primary btn" value="提交"> </div> </div> </div> </form> </div> </div> </div> {% endblock %}

CMDB - Bootstarp 套用模板

Bootstarp 套用模板

猜你喜欢