用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分页.这里讲的是后端分 ...
随机推荐
- JZOJ 1494. 密码
留个高精度的模板 \(Code\) #include<cstdio> #include<cstring> using namespace std; int n , a[5005 ...
- echart4和echarts5同时引入方法
main.js import Vue from 'vue' 同时引入如下: // 引入echart4,echarts4版本放本地, import echarts4 from '../static/js ...
- vue-element-admin 怎么改后端 可以调跳过登录并且发送接口请求
1.找到根目录的 vue.config.js 添加 proxy 内容 注释掉mock 2.清空 .env.development 里的 VUE_APP_BASE_API 路径 3.user.js 方 ...
- ROS librviz库
1.可视化管理类:rviz::VisualizationManager The VisualizationManager class is the central manager class of r ...
- yile接口
后台接口: ---------------------------更改订单状态接口(需要主站长账号权限,主站要有接口权限)更改订单状态(可批量更新),如需退款/退单请用订单退款退单接口,如需更新订单数 ...
- 面向对象程序设计第三次blog
一.前言 第六次题目集总结-- 题量:较少 难度:较高 知识点: 判断输入内容 提取输入的有效信息并进行计算 总结:题目比较难,题量较少. 第七次题目集总结-- 题量:较少 难度:一般 知识点: 输入 ...
- stm32 出入栈
Start.S 一般指定栈顶指针及栈大小 1.硬件中断 有硬件入栈和软件入栈部分 硬件入栈寄存器: R0,R1,R2,R3,R12,PSR 软件入栈寄存器: r4 - r11 2.程序切换入栈 ...
- PS技能之电子签名+修白牙齿
PS技能 NO.1 电子签名 有时候由于时空的限制,本人无法签字,那么电子签名就有了它的作用啦![注:谨慎使用] 亲试有效的教程,现在就是做笔记的时候啦! 教程链接如下: https://blog.c ...
- PLC数据块中的偏移量
PLC数据块中的偏移量是什么? 偏移量定义为:把存储单元的实际地址与其所在段的段地址之间的距离称为段内偏移,也称为"有效地址或偏移量". 段地址左移四位,与有效地址相加,就构成了逻 ...
- Java 复习篇2---jdk
jdk 文件: bin 该路径下存放了各种工具命令, 其中重要的有javac 和Java conf: 改路径下存放了相关配置文件 include: 该路径下存放了一些平台特定的头文件 jmods; 该 ...