CMDB - Bootstarp 套用模板
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">
×
</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 %}
\-0。0|||、
有问题欢迎来找我 撩骚~~~~~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥