用Bootstrap设计后端页面模板
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>网站后台管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../static/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style type="text/css">
#li1{
list-style: none;
font-size: 16px;
}
</style>
<style type="text/css">
@media (min-width:768px) {
#slider_sub{
width:180px;
margin-top: 55px;
position: absolute;
z-index: 1;
height:650px;
}
.page_main{margin-left: 180px;margin-top: -18px;}
}
</style>
</head>
<body>
<!--先设置个响应式导航条-->
<nav class="navbar navbar-default navbar-static-top" style="background: #204d74">
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" style="color:white;margin-top: -25px"><h2>数据中心采集系统</h2></a>
</div>
<ul class="navbar-nav navbar-right" style="margin-right:25px; margin-top: 20px">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-home"></span> 退出</a></li>
</ul>
<!--侧边功能栏-->
<div class="navbar-default navbar-collapse" id="slider_sub">
<ul class="nav">
<li>
<a href="#" data-toggle="collapse" data-target="#sub1">用户信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub1" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-user"></span> 个人信息</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#sub2">店铺信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub2" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-book"></span> 基础档案</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 区域分布</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#sub3">数据信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub3" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-yen"></span> 银行现金</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-usd"></span> 外卖收入</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-gbp"></span> 小程序</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-ruble"></span> 成本费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-btc"></span> 经营费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-paperclip"></span> 报销费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-random"></span> 人事费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-euro"></span> 初始投资</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-remove"></span> 未返款</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-magnet"></span> 净利润</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--中间部分-->
<div class="page_main">
<!--面包导航-->
<ol class="breadcrumb" style="background: #265a88;">
<li style="margin-left: 10px;color: white" >您当前的位置：</li>
<li><a href="#">用户信息</a></li>
<li><a href="#">人个信息</a></li>
</ol>
<!--表格内容-->
<div class="container" style="margin-left: -5px;">
<!--筛选条件框-->
<form method="post" style="margin-top: -20px;">
<h5>
<div class="appNameSelect" style="width:1300px;">
<label >店铺名称:</label>
<input id="appName_1" name="appName_1" placeholder="输入店铺名称" type="text" list="appNamelist" style="padding:0.3em;border-radius:3px;" >
<datalist id="appNamelist">
<option>桂源铺(大华乐购店) </option>
<option>桂源铺(大华第一坊) </option>
</datalist>
<label >店铺代码:</label>
<input id="appName_5" name="appName_5" placeholder="输入店铺代码" type="text" list="appNamelist_5" style="padding:0.3em;border-radius:3px;" >
<datalist id="appNamelist_5">
<option>G1057 </option>
<option>G1022 </option>
</datalist>
<label>    年份:</label>
<select id="appName_2" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<label >-- 月份:</label>
<select id="appName_3" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<label >    科目类型:</label>
<select id="appName_4" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>现金 </option>
<option>货币 </option>
</select>
<button type="submit" class="btn btn-primary" id="btn">查 询</button>
<button type="submit" class="btn btn-success" id="btn">新 增</button>
</div>
</h5>
</form>
<!--表格内容框-->
<div class="panel panel-default" style="width:1200px;">
<div class="panel-heading">最新订单</div>
<div class="panel-body ">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>日期</th>
<th>店铺名称</th>
<th>店铺代码</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>2</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>3</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
</tr>
<tr>
<td>4</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>5</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination" style="margin-top: 2px;">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../static/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
用Bootstrap设计后端页面模板的更多相关文章
- 15个最好的Bootstrap设计工具推荐
摘要:Bootstrap不单单是一个框架,更确切的说,它改变了整个游戏规则.该框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产品. Bootstrap是由前Twitt ...
- 12 款最好的 Bootstrap 设计工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便.非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了. 其中最 ...
- 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...
- 分享12款最佳的Bootstrap设计工具
设计师总会渴望有一些新奇有趣的设计工具来提高工作效率,而Bootstrap就是您的不二选择.2013年Bootstrap得到了广泛普及, 它是开发者较为常用的框架之一,本文我们将分享12款最佳的Boo ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- MVC+Bootstrap设计
MVC+Bootstrap) 二 框架设计 文章目录: 一.前言 二.结构图 三.项目搭建 四.代码生成 五.实现接口 六.依赖倒置 七.登录实现 八.最后 一.前言 这个框架是从最近几年做过的项目中 ...
- 基于Bootstrap设计网页
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- [转]Bootstrap table后端分页（ssm版）
原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...
随机推荐
- 免杀之：Mimikatz 免杀过杀软，思路学习
免杀之:Mimikatz 免杀过杀软 目录 免杀之:Mimikatz 免杀过杀软 1 环境准备 2 处理过程 2.1 生成原始的Mimikatz程序 2.2 定位到代码或字符串上特征绕过 2.3 定位 ...
- 在线工具帮助医生在社区转诊时甄别SpA患者
在线工具帮助医生在社区转诊时甄别SpA患者 Habibi S, et al. Rheumatology 2016. Present ID: 202. 背景:目前已开发了多种转诊策略以优化脊柱关节炎(S ...
- [EULAR文摘] 脊柱放射学持续进展是否显著影响关节功能
脊柱放射学持续进展是否显著影响关节功能 Poddubnyy D, et al. EULAR 2015. Present ID: THU0199. 背景: 强直性脊柱炎(AS)患者的机体功能和脊柱活动性 ...
- CCRD总目录(2007年至今,动态更新中)
中信国健临床通讯总目录 (动态更新.末次更新: 2015-07-06) 年份 目录网址 2010年 1．2010年第01期 (或者浏览有备注的目录: 2010年第01期 ) 2. 2010年第02期 ...
- JS结束时间与当前时间间隔
实现内容: 1.时间戳 1587024986952 转成年月日时分秒 2020-04-16 16:16:46 2.当前时间new Date()转成年月日时分秒2019-04-17 10:27:27 3 ...
- 遗忘的pawn 创建
默认加载 pawn::staticclass; ConstructorHelpers::FClassFinder<>Pawnpath(TEXT("_C")); 然后是的 ...
- mysql版本升级 5.7.21-8.0.30
当前MySQL版本为:5.7.21 升级前准备,了解5.7和8.0版本有何区别,本文主要为升级操作文档,具体建议参考官方文档,概括性的有以下几点: >默认字符集由latin1变为utf8mb4 ...
- calico 关闭SNAT
calico 关闭SNAT 默认情况下,calico 访问集群外网络是通过 SNAT 成宿主机 ip 方式,在一些金融客户环境中为了能实现防火墙规则,需要直接针对 POD ip 进行进行规则配置,所以 ...
- 2021年爆出log4j漏洞修复
(1)用户可自查系统是否引用 Apache log4j-core 依赖,没有引用则不受漏洞影响. (2)排查系统中日志配置是否采用远程动态加载模式.(3)排查系统中是否正在使用JDBCAppender ...
- unzip--离线安装
centos 7 查看系统版本 [root@localhost work]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) ...