CMDB

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="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="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=" 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=" 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 %}
原文地址:https://www.cnblogs.com/huidou/p/10758008.html